Autor Zpráva
zetor22
Profil
Ahoj, měl bych takový jednoduchý (hloupý) dotaz.
Tady je ukázka odsazování divů http://ukazky.maxcz.cz

<div id="container">
  
    <div id="header">

      <div id="header_cont">aaa</div>
    
    </div>
  
  
  </div>

Div header_cont bych chtěl odsadit třeba o 20px shora, ale když dám do css toto:

div#header_cont {
margin: 20px auto auto auto;
}

odsadí se div container... zatím to řeším takovým clearovacím divem <div class="clearovaci_div">&nbsp;</div> (nulová výška a výška řádku), který dám nad div header_cont, ale toto řešení se mi moc nelíbí... poradil by mi někdo jak to dělat jinak?
Taurus
Profil
Zkus

div#header_cont {
    margin: 0 auto;
    padding-top: 20px;
}

Těch 20 px probublá do #container, protože z marginů dvou sousedních divů vznikne margin rovný většímu z nich.
zetor22
Profil
padding se mi už vůbec nezamlouvá, protože roztahuje ten div kterému ho nastavím... jiné řešení by nebylo?
a teď jsem si to i vyzkoušel a padding mi to taky neodsadí... odsadí jen text uvnitř divu
Taurus
Profil
Pak tě nechápu. Nelíbí se ti odsazení #container, ani #hader_cont.

Edit: aha, máš na mysli odsazení šedé části od té černé?
zetor22
Profil
padding-top mi neodsadí div header_cont ale roztáhne ho na výšku o ten nastavený padding.... odsadí pouze text v divu

viz ukázka2:
http://ukazky.maxcz.cz/?p=ukazka2


přesně tak, chci odsadit celý div (světle šedou od tmavě šedé)
juriad
Profil
Jedná o problém http://jecas.cz/margin#vyteceni.
Ten padding-top dej elementu #header, uvnitř kterého je ten odsazovaný #header_cont.
Taurus
Profil
Ano, je to jak píše juriad, jen jsem špatně pochopil, co chceš odsadit. Pak stačí dát těch 20 px o úroveň výš.
zetor22
Profil
u toho paddingu se mi nelíbí, že roztahuje div, bude asi lepší použíš absolutní pozicování v tomto případě ne?
juriad
Profil
zetor22:
Tak tomu divu zmenši výšku právě o těch 20 pixelů.
Absolutním pozicováním si jen zaděláš na další problémy.
zetor22
Profil
no, tak díky za rady
Joker
Profil
Anebo, kdyby z nějakého důvodu byl problém převést ten margin na padding vnějšího prvku, mělo by fungovat tomu vnějšímu prvku dát margin-top: -1px a border-top-width: 1px.
Horní rámeček zruší to přetékání marginu, negativní margin vykompenzuje ten rámeček a rozměry prvků to neovlivní.

Ale obvykle bude jednodušší a čistší řešení místo marginu vnitřního prvku dát vnějšímu prvku padding a příslušně zmenšit rozměry.
zetor22
Profil
jo, to vím, že border to přetékání zruší, no taky zajmavé řešení... dík

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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