Autor Zpráva
ondrakrajcik
Profil *
Zdravím,

jak se řeší když nastavím div na width:100% a nastavím padding: 20px; tak aby se neobjevilo rolování doleva-doprava?
juriad
Profil
Dáš dva divy do sebe:
<div style="width: 100%">
<div style="padding: 20px"> 
</div>
</div>

Nebo moderněji, změníš vlastnost box-sizing na border.
Petr ZZZ
Profil
Není lepší místo paddingu dát tomu vnořenému divu margin?
Str4wberry
Profil
Nebo padding nastavovat také v procentech.

div {
  width: 98%;
  padding: 1%;
}
juriad
Profil
Petr ZZZ:
Padding je jistý - natvrdo zvětšuje velikost prvku. Margin může mít kvůli slučování a vytékání dost zajímavé chování.
anonymníí
Profil *
ondrakrajcik:
Divím se, že to zatím nikdo nezmínil.

Div je blokový element a ten má defaultně šířku 100%, resp. 100% - paddingy. Pokud chceš pracovat s jedním divem, nastav mu pouze padding a šířku vynech, nastaví se automaticky do 100%.

Pokud je deklarovaná šířka tohoto divu někde jinde, nastav mu width: auto.
A pokud tam float, odeber jej (float: none), blok přes celou šíři rodiče nemusí plavat.


Petr ZZZ:
Padding a margin mohou někdy vypadat podobně nebo dokonce stejně, ale jedná se o dvě vlastnosti, které se nedají zaměnit jedna za druhou. Kromě zmíněného slévání marginů (někdy) je hlavní, nebo možná lépe, jeden z hlavních, rozdíl v práci s pozadím, nebo nastavení souřadnicového systému pro absolutně pozicované potomky.
juriad
Profil
anonymníí:
Aha, vedle mu radím zrušit float, ale nevšiml jsem si, že se jedná o stejného člověka.
IdemeNaHavaj
Profil
Ahoj
ondrakrajcik:
jak se řeší když nastavím div na width:100% a nastavím padding: 20px; tak aby se neobjevilo rolování doleva-doprava?
Ja to rieším takto v CSS:
-box-sizing: border-box
-moz-box-sizing:border-box

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: