Kde se bere mezera mezi 2DIVy {margin:0} – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petroff0
Věrný člen
11. 12. 2007   #1
-
0
-

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.–
Reklama
Reklama
imcold0
Newbie
13. 12. 2007   #2
-
+1
-
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
-
0
-

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.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

Podobná vlákna

Mezera mezi divama — založil Apik

Problém s margin — založil JeanBabtisteGrenouille

Float-right způsobí "margin"? — založil Radek Chalupa

Iphon - margin: 0 auto; — založil Jaratyp

Mezera — založil Dave-CZ

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý