Cześć! Zacząłem niedawno naukę CSS, ale mam jeden problem… Kiedy już okoduję stronę w html’u i zacznę zabawę w stylizacje wizualną, to jak prawidłowo określić rozmiar poszczególnych elementów w CSS’ie? Jedyny sposób to rzucić przykładowy wymiar np 40 px paddingu i odświeżyć stronę, czy może istnieje jakiś inny sposób na wcześniejsze dokładne obliczenie poszczególnych elementów? Bo np. jeśli wrzucę w diva 500px cztery divy po 125px, to nie uwzględni mi odstępów, a wymagalne będą np odstępy po 20px z każdej strony i teraz pytanie… Jak prawidłowo wszystko obliczyć? Biorę div’a, dla przykładu 500px i chcę zrobić cztery równe kwadraty w tym divie, daje im wymiar 125px i muszę doliczyć jeszcze, dla przykładu po 10px odstępu z każdej strony, to daje im wymiar 165px? Jak to tak szybko obliczać, co brać pod uwagę? Po prostu w tym prawidłowym obliczaniu rozmieszczenia poszczególnych elementów się gubię.
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title></title>
<style>
#glowny {
width: 500px;
overflow: hidden;
box-sizing: border-box;
}
#glowny .main {
width: 125px;
float: left;
box-sizing: border-box;
height: 125px;
text-align: center;
padding: 35px;
}
#glowny .jeden {background: #ccc;}
#glowny .dwa {background: #ff9900;}
#glowny .trzy {background: #767676;}
#glowny .cztery {background: #ff0000;}
</style>
</head>
<body>
<div id=“glowny”>
<div class=“main jeden”><p>jeden</p></div>
<div class=“main dwa”><p>dwa</p></div>
<div class=“main trzy”><p>trzy</p></div>
<div class=“main cztery”><p>cztery</p></div>
</div>
</body>
</html>
Co daje taki kod. Masz jeden ogólny div o szerokości 500px a w nim 4 div’y każdy po 125px. Opcja “ box-sizing: border-box “ sprawia że gdy w jednym z 4 div’ów dasz padding (tak jak ten text wnętrz 4 div’ów) to nie powiększy on jego rozmiaru. Jak tak zawsze robię. Skopiuj ten text i zapisz jako plik html i go obejrzyj. Z ciekawości usuń opcję “ box-sizing: border-box “ a zobaczysz co daje ta opcja.