|
|||
85 + 15 = 110?!
hab mir gerade mal aus spaß was gebastelt. und war soll am linken rand n container sein der 15% abstand nach oben hat, und 85% hoch ist.
mein Code sieht so aus Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head> <title>test</title> <style type="text/css"> html, body {height: 100%; margin: 0 0 0 0; } #left {width: 150px; margin-top: 15%; height: 85%; background: #c3ffff; float: left; } </style> <body> <div id="left"></div> </body> </html> Wie kommt das? hat doch bestimmt wieder irgendwas mitm Viewport u tun, oder? Oder wieso sind bei hier 85%+15% mehr als die 100 sichtbaren % ? Wenn ich das floating weglass dann hab ich sogar UNTEN DRUNTER nen Abstand von 15%, obwohl ich margin-bottom: 0; hatte |
Sponsored Links |
|
|||
moin,
height und width beziehen sich bei relativen (%) Angaben auf das Elternelement. <edit> margin, padding beziehen sich bei relativen (%) Angaben auf die Breite des Elternelement. margin, border, padding beziehen sich bei relativen (em) Angaben auf die Schriftgröße im Element. weitere Info weiter unten </edit>
__________________
</ulle> |
Sponsored Links |
|
|||
hier noch ein "work out" zum Thema:
relative Angaben für margin, border, padding Einfach den CODE kopieren und Anzeigen; Erklärung im Dokument Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css"> /*<![CDATA[*/ html,body { margin: 0; padding: 3px; background-color: #FFCC33; color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 100.01%; } div.em { margin: 1em; /* beeinflusst durch font-size */ border: 1em solid #000000; /* beeinflusst durch font-size */ padding: 1em; /* beeinflusst durch font-size */ } div.prozent { margin: 1%; border: 1px solid #000000; /* prozentuale Angaben nicht erlaubt */ padding: 1%; font-size: 0.8em; /* beeinflusst nicht die prozentualen Angaben von margin,padding */ } div.inhalt { /* diese Klasse ist nur zum sichtbar machen des verbleibenden Inhalts */ margin: 0; border: 0; padding: 0; color: #663300; background-color: #FFEECC; } p { margin: 2em; color: #0033DD; font-size: 0.8em; } hr { margin: 2em 2em 0; } /*]]>*/ </style> </head><body> Folgende Container enthalten relative Angaben [em] für margin, boder und padding - hier wird deutlich das diese Angaben in Abhängigkeit zu der im Container benutzten Schriftgröße steht. </p> <div class="em"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 1em (geerbt von BODY -> font-size: 100.01%); </div> </div> <div class="em" style="font-size: 0.7em"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 0.7em; </div> </div> <div class="em" style="font-size: 1.5em"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 1.5em; </div> </div> <div class="em" style="font-size: 5px"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 5px; </div> </div> <hr /> Folgende Container enthalten relative Angaben [%] für margin und padding , für border nicht erlaubt deshalb 1px - hier wird deutlich das diese Angaben in Abhängigkeit zur Inhalts-Breite, nicht Höhe, des Eltern-Elements steht. </p> <div class="prozent" style="width: 500px;"> <div class="inhalt"> margin: 1%; padding: 1%; / width: 500px; </div> </div> <div class="prozent" style="width: 50em;"> <div class="inhalt"> margin: 1%; padding: 1%; / width: 50em; </div> </div> <div class="prozent" style="width: 95%;"> <div class="inhalt"> margin: 1%; padding: 1%; / width: 95%; </div> </div> </body></html>
__________________
</ulle> |
Themen-Optionen | |
Ansicht | |
|
|