Dlaczego ustawnienie divów za pomocą display: inline-block powoduje ustawienie odstępów pomiędzy divami?

pytanie zadane 5 stycznia 2019 w HTML i CSS przez donekdzwonek Początkujący (420 p.)

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<style>
		
		body
		{
			margin: 0px;
		}
		
		#container
		{
			width: 1000px;
			margin-right: auto;
			margin-left: auto;
		}
		
		#pierwszy
		{
			width: 696px;
			background: #333;
			display: inline-block;

		}
		
		#drugi
		{
			width:300px;
			background-color: #555;
			display: inline-block;
		}
	
	
	</style>
	
</head>

<body>
	<div id="container">
	
		<div id="pierwszy"> To jest pierszy div</div>
		<div id="drugi"> A to jest drugi div </div>
	
	</div>
</body>
</html>

Stworzyłem diva, o szerokości 1000px wewnątrz którego są dwa inne divy ustawione obok siebie za pomocą display: inline-block. Suma szerokości obu divów to 996px. Powyżej tego kontenery już nie są obok siebie. Czegoś takiego nie ma, gdy ustawię divy obok siebie za pomocą float: left. Dlaczego istnieje między nimi odstęp i czy da się go jakoś ustawić?

3 odpowiedzi

odpowiedź 5 stycznia 2019 przez arces Pasjonat (17,700 p.)

Skorzystaj z flexboxa i nie będziesz miał problemu. Floaty staraj się omijać jak ognia, tylko w niektórych wypadkach należy ich używać. Co do odstępu pomiędzy blokami, które masz w środku - jest to spowodowane właśnie przez display: inline-block.

komentarz 5 stycznia 2019 przez Eimens Maniak (69,240 p.)

Co ciekawe te odstępy spowodowane są tym że w kodzie są przerwy pomiędzy elementami.

Wystarczy zamienić:

<li>one</li>
<li>two</li>
<li>three</li>

<li>one</li><li>two</li><li>three</li>

i problem znika. Natomiast kilka fajnych sposobów na "naprawienie" tego znajdziesz tutaj.

komentarz 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)
edycja 5 stycznia 2019 przez matir85

To jest rozwiązanie nie za dobre. Bo jak mu edytor spowrotem ułoży kod po swojemu to rozwali mu cała stronę.

1	komentarz 5 stycznia 2019 przez Byczek_ Bywalec (2,570 p.) Wystarczy ustawić font-size:0; dla rodzica.

komentarz 5 stycznia 2019 przez Eimens Maniak (69,240 p.)

@Byczek_

każde rozwiązanie ma swoje plusy i minusy.

W mojej odpowiedzi podałem link do artykułu gdzie zostały one w przyjazny sposób omówione.

komentarz 5 stycznia 2019 przez Byczek_ Bywalec (2,570 p.)

Wiadomo, że każde roziązanie ma swoje plusy i minusy aczkolwiek ten sposób jest dla mnie najwygodniejszy.

odpowiedź 5 stycznia 2019 przez Eimens Maniak (69,240 p.)

Cześć!

Odpowiedź znajdziesz tutaj:

LINK

komentarz 5 stycznia 2019 przez donekdzwonek Początkujący (420 p.)

Dzięki, dobry artykuł

odpowiedź 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)

Podobne pytania

0 głosów

3 odpowiedzi 438 wizyt

Float: left; czy Display: inline-block;

pytanie zadane 2 sierpnia 2020 w HTML i CSS przez niezalogowany

0 głosów

3 odpowiedzi 886 wizyt

Problem z wyśrodkowaniem tekstu- brak reakcji na display:inline-block oraz float: left

pytanie zadane 5 grudnia 2018 w HTML i CSS przez NewbieLemoo Nowicjusz (160 p.)

0 głosów

1 odpowiedź 224 wizyt

Programowanie webowe odc. 2: Float left vs. Display inline-block - biała linia

pytanie zadane 29 stycznia 2017 w HTML i CSS przez Baszczer Nowicjusz (120 p.)

Dlaczego ustawnienie divów za pomocą display: inline-block powoduje ustawienie odstępów pomiędzy divami?

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci