Kde se bere mezera mezi 2DIVy {margin:0} – CSS – Fórum – Programujte.com

Rozšířené hledání ›

Nejnovější témata ve fóru

14:46, Python Používáte SQLAlchemy nebo pandas? pymysql

11:30, Funkcionální progr… Promotic

09:34, Software KAPEKA - zadní dvířka do woken

20:43, Hardware Adaptér pro sériové připojení LCD displejů

23:05, Vzdělání Platy softwarářů

22:47, Právo a podnikání Zákon o majitelích firem

Stavba Laser Arény
Laser Game Brno

Fórum › CSS

Kde se bere mezera mezi 2DIVy {margin:0}

Petroff0

Věrný člen

11. 12. 2007 #1

Zjistil jsem že za určitých okolností se objeví mezera mezi bloky , přestože mají oba nulový okraj.
Mají barevné pozadí aby mezera byla patrná.
Jako příklad uvádím jednu serii testů - rád bych znal vysvětlení tohoto chování (popř. tématický link):

<style>

/* 1. S MEZEROU */  div {background:red }                                         

/* 2.BEZ MEZERY */  div {background:red; padding-top:1px; padding-bottom:1px}  

/* 3. S MEZEROU */  div {background:red; height:4em }                           

/* 4.BEZ MEZERY */  div {background:red; height:4em; padding-top:1px}       

/* 5a.BEZ MEZERY */ div {background:red; overflow:auto }                       

/* 5b.BEZ MEZERY */ div {background:red; overflow:hidden }                    

</style>

<body>

    <div>

        <p> 1.blok  </p>

    </div>

    <div>

        <p> 2.blok  </p>

    </div>

</body>

Pozn.: Schválně jsem uvedl těch několik málo pravidel, kdy se mezera neobjevila (narozdíl od většiny případů)

Nahlásit jako SPAM

IP: 89.102.211.–

imcold0

Newbie

13. 12. 2007 #2

Zajímavé

Medzera sa tam zobrazí, pretože p má nenulový margin: podľa odstavca Collapsing margins zo špecifikácie http://www.w3.org/TR/CSS21/box.html#collapsing-margins ("zasúvacie okraje") bude vertikálny margin div-u rovný hodnote maxima z jeho marginu a marginu odstavca (v tomto prípade). Pre ilustráciu výsledných rozmerov marginu si skús zameniť štýl za takéto niečo:

body {

  padding: 0;

  border: 1px solid #888;

}

div {

  background: red;

  margin: 5px 0;

}

p {

  margin: 5px 0;

}

a meň hodnoty marginu striedavo pre div a p: raz daj väčší jednému elementu, raz druhému. Ak však div-u priradíš nejaký nenulový border alebo vertikálny padding, marginy sa zlučovať nebudú. Link na túto tému napr. http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php s celkom peknými ilustráciami.

Nahlásit jako SPAM

IP: 89.173.112.–

Petroff0

Věrný člen

13. 12. 2007 #3

Díky
Slučování okrajů znám, ale tohle moc logické není => vlastně to přemístí okraj z vnořeného prvku mezi jeho rodiče a "strýce".
Nepochybně z libovolné hloubky vnoření....

Nahlásit jako SPAM

IP: 89.102.211.–

← Zpět na seznam vláken ← Zpět do Fóra