[HTML/CSS] odstęp, przerwa między divami

pytanie zadane 16 kwietnia 2017 w HTML i CSS przez JKluseczka Obywatel (1,430 p.)
zamknięte 17 kwietnia 2017 przez JKluseczka

Wiem, że takich pytań było dużo, ale żaden nie rozwiązuje mojego problemu... Jak zlikwidować tą przerwę?

kod (uproszczony i mocno okrojony, ale błąd ciągle występuje):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				margin: 0;
				border 0;
				padding: 0;
			}
			#logo{
				width: 100%;
				height: 150px;
				border-bottom: 3px solid black;
				margin: 0;
				padding: 0;
			}
			#container{
				width:900px;
				border-left: 2px solid black;
				border-right: 2px solid black;
				margin: auto;//tylko po to, żeby to wycentrować
							 //zmiana na 0 nie pomaga
				padding: 0;
			}
			#a{
				width: 250px;
				float: left;
				margin: 0;
				padding: 0;
			}
			#b{
				width: 250px;
				float: left;
				margin: 0;
				padding: 0;
			}
			#c{
				width: 400px;
				float: left;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<!--kompletnie przykładowy obrazek (wcześniej tu było logo)-->
		<img id="logo" src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///81Wv81WvyH5BAEAAAMALAAAAAAKAAoAAAIUjIViq+x7QpunwXoZ lXFu/mjIUgAAOw=="><div id="container"><div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		<!--brak znaków białych-->	
			</div>

			<div id="b">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
			
			<div id="c">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

Wszędzie dodałem margin i padding 0. Siedzę nad tym od godziny, szukam w necie i nic nie umiem znaleźć... Ktoś pomoże?

komentarz zamknięcia: Uzyskano odpowiedź

5 odpowiedzi

odpowiedź 17 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 17 kwietnia 2017 przez JKluseczka

Najlepsza

a jak dasz diva id="logo" a dopiero w nim img?

komentarz 17 kwietnia 2017 przez JKluseczka Obywatel (1,430 p.)

thx pomogło

odpowiedź 17 kwietnia 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

To może inaczej. Otwórz swoją stronę w przeglądarce i otwórz dev-tools. Jak to zrobić? Uwaga podaję dla chrome:

Prawy przycisk myszy
Zbadaj
Otworzą ci się narzędzia dla developerów po prawej stronie, albo na dole
W lewym górnym rogu będziesz mieć ikonkę ze strzałką - kliknij w nią, a potem pojeździj po stronie kursorem
Kliknij w miejscu, które cię interesuje. Po prawej pokaże się kod html i w oddzielnej sekcji css odpowiedzialny za wygląd. Poszukaj, a znajdziesz regułę, bez problemu. Prawdopodobnie to jakiś styl z przeglądarki, który trzeba nadpisać, albo coś się odziedziczyło po innym elemencie.

Sprawdź to sobie, a potem jak nie będziesz dalej wiedział, to spróbuję pomóc. Pozdrawiam

komentarz 17 kwietnia 2017 przez JKluseczka Obywatel (1,430 p.)

Nie pomogło, bo wg przeglądarki tam jest body, a nic z body nie jestem w stanie zrobić. Ale thx za sposób z strzałką (bo o samych dev-toolsach wiedziałem )

odpowiedź 17 kwietnia 2017 przez betman Bywalec (2,630 p.)

Zobacz Teraz


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            
            * {
                margin: 0;
                padding: 0;
            }
            
            body{
                margin: 0;
                border 0;
                padding: 0;
            }
            #logo{
                width: 100%;
                height: 150px;
                border-bottom: 3px solid black;
                margin: 0;
                padding: 0;
                position: fixed;
            }
            #container{
                width:900px;
                border-left: 2px solid black;
                border-right: 2px solid black;
                margin: 0 auto;
                padding-top: 160px;
            }
            #a{
                width: 250px;
                float: left;
                margin: 0;
                padding-top: 0;
            }
            #b{
                width: 250px;
                float: left;
                margin: 0;
                padding: 0;
            }
            #c{
                width: 400px;
                float: left;
                margin: 0;
                padding: 0;
            }
            
        </style>
    </head>
    <body>
        <!--kompletnie przykładowy obrazek (wcześniej tu było logo)-->
        <img id="logo" src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///81Wv81WvyH5BAEAAAMALAAAAAAKAAoAAAIUjIViq+x7QpunwXoZ lXFu/mjIUgAAOw=="><div id="container"><div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <!--brak znaków białych-->   
            </div>
 
            <div id="b">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
             
            <div id="c">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

komentarz 17 kwietnia 2017 przez JKluseczka Obywatel (1,430 p.)

Ciekawy sposób z daniem position fixed i ustawieniem paddingu. Problem będzie tylko wtedy kiedy zmienię wysokość loga (po miesiącu na przykład), a potem zapomnę o tym paddingu. Ale thx

odpowiedź 16 kwietnia 2017 przez PsychoButter Gaduła (3,630 p.)

Witaj

Sprobuj dodac na poczatku style

* {
margin: 0;
padding: 0;
}

Lub mozesz usunac wszystkie domyslne ustawienia przekladarki

* {
margin: 0;
padding: 0;
border: 0;
line-height: 1.4em;
vertical-align: baseline;
text-decoration: none;
outline: 0;
}

komentarz 16 kwietnia 2017 przez JKluseczka Obywatel (1,430 p.)

Nie pomogło

komentarz 17 kwietnia 2017 przez PsychoButter Gaduła (3,630 p.)

Przepraszam nie sprawdzalem kodu zdjecie wzyc do div przed div em conteiner

odpowiedź 17 kwietnia 2017 przez Nicolaus Dyskutant (9,740 p.)
edycja 17 kwietnia 2017 przez Nicolaus

Można powiedzieć że się udało ^^

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--kompletnie przykadowy obrazek (wczeniej tu było logo)-->
<div id="logocontainer">
<img id="logo" src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///81Wv81WvyH5BAEAAAMALAAAAAAKAAoAAAIUjIViq+x7QpunwXoZ lXFu/mjIUgAAOw==">
</div>

<div id="container">
<div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!--brak znakw biaych-->
</div>

<div id="b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>

CSS:

body{
margin: 0;
border 0;
padding: 0;
}

#container{
width:900px;
border-left: 2px solid black;
border-right: 2px solid black;
margin: auto;//tylko po to, eby to wycentrowa
//zmiana na 0 nie pomaga
padding: 0;
}

#a{
width: 250px;
float: left;
margin: 0;
padding: 0;
}

#b{
width: 250px;
float: left;
margin: 0;
padding: 0;
}

#c{
width: 400px;
float: left;
margin: 0;
padding: 0;
}

#logocontainer {
margin: 0;
padding: 0;
border-bottom: 3px solid black;
height: 150px;
}

#logo{
width: 100%;
height: 100%;
}

komentarz 17 kwietnia 2017 przez JKluseczka Obywatel (1,430 p.)

Dałeś #a do #logocontainer, ale mniejsza z tym.

komentarz 17 kwietnia 2017 przez Nicolaus Dyskutant (9,740 p.)

Nie prawda. Wszystko jest dobrze :)

komentarz 17 kwietnia 2017 przez JKluseczka Obywatel (1,430 p.)

HTML 9linia zobacz co jest po <img> i </div>

EDIT:

a w 10 linii masz komentarz "brak znaków białych". Specjalnie tak to zrobiłem, bo gdzieś wyczytałem, że to może być problemem

komentarz 17 kwietnia 2017 przez Nicolaus Dyskutant (9,740 p.)

Ze znakami białymi nie ma problemu bo stosujesz float: left; , przy display: inline-block; jest taki problem. Zauważ, że po <img> jest </div> złe linie podświetliłem.

PS Zobacz teraz na kod :D