Przestrzenie między div-ami

0

Mam problem z tak podstawową rzeczą, że aż wstyd pisać choć już naprawdę nie wiem co może go powodować....

Postanowilem pobawić się trochę div-ami, zrobić sobie proste ćwiczenie. Ustawiłem kilka div-ów w kilku wierszach i między div-ami pojawiają się przerwy między nimi, nie wiem co może je wytwarzać, może ktoś mi podpowie o co tutaj chodzi.

Kod html:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>test</title>
</head>
<body>


<div id="row1" class="row">
	<div id="1" class="button">1</div>
	<div id="2" class="button">2</div>
	<div id="3" class="button">3</div>
</div>

<div id="row2" class="row">
	<div id="4"  class="button">4</div>
	<div id="5" class="button">5</div>
	<div id="6" class="button">6</div>
</div>

<div id="row3" class="row">
	<div id="7" class="button">7</div>
	<div id="8" class="button">8</div>
	<div id="9" class="button">9</div>
</div>


</body>
</html>

 

Kod css:


html, body
{
	background-color: #fff;
	border: 0;
	margin: 0 auto;
	padding: 0;
}

div.button
{
	border: 1px #0f0 solid;
	width: 50px;
	height: 50px;
	display: inline-block;
	padding: 0;
	margin: 0 auto;
}

2

jak robisz

inline-block

to wtedy bedziesz miec wlasnie takie przerwy. Pomaga

font-size: 0;

dlaczeog pomaga font-size 0? Nie mam bladego pojecia.
wiec dla wszystkiego ustawiasz font-size 0, pozniej dla kolumny/wszystkiego/pojedynczego kwadratu ustawiasz juz font-size jaki chcesz.

0

Faktycznie, sztuczka z font-size dla html, body działa, także nie rozumiem dlaczego, ale działa.

1

jak zrobisz coś takiego:

<div>jakieś
trzy
słowa</div>

to pomiędzy jakieś, trzy oraz słowa będzie spacja.
słowa to są właśnie takie jakby elementy inline.

Ty robisz to samo z divami - układasz je jako inline oraz robisz znak nowej linii pomiędzy nimi - wstawia się spacja, co jest normalne (i pożądane) dla HTML.

wystarczy zrobić

<div id="row2" class="row">
    <div id="4"  class="button">4</div><div id="5" class="button">5</div><div id="6" class="button">6</div>
</div>
<div id="row3" class="row">
    <div id="7" class="button">7</div><div id="8" class="button">8</div><div id="9" class="button">9</div>
</div>

i będzie ok. wstawianie stylu font-size: 0 do całego body a potem nadgrywanie go wydaje się chybionym pomysłem (przy towrzeniu strony składającej się z więcej niż 3 divów zobaczysz dlaczego)

0

Już wiadomo dlaczego ustawienie font-size na 0 pomaga :D Dzęki za kolejną, jeszcze lepszą odpowiedź ;-) Teraz nie trzeba ustawiać dla wszystkiego font-size: 0; .

1 użytkowników online, w tym zalogowanych: 0, gości: 1