6 svar · 344 visningar · startad av J.N.
HEJ!
Jag pillade itu en css-meny för att förstå hur den är uppbyggd, men körde fast på en sak.
Varför blir det inte 2x8px mellan menyerna?
Padding är 0.5em, 1em är 16px, följdaktligen är hälften 8px, och 8px från övre knappen och 8px från undre blir 16px mellan menyerna.
Men, det blir alltså endast 8px, vilket jag förutsätter är rätt, men hur motiveras det?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
* {margin:0; padding:0;}
body{font-family:verdana;}
#menu a, #menu a:visited {
text-decoration:none;
text-align:center;
background-color:#aaa;
color:#fff;
display:block;
width:8em;
padding:0.2em;
margin:0.5em 0;
}
</style>
</head>
<body>
<div id="menu">
<a href="#">KnappÅg 1</a>
<a href="#">Knapp 2</a>
</div>
</body>
</html>
Känner ni för att göra en utläggning om varför fonthöjden blir 18px, när den borde bli 16px, får ni gärna det också, men vet att det inte är så enkelt, kort sagt.
margin:0.5em 0;
Är ekvivalent med:
margin-top:0.5em;
margin-right:0;
Vilket alltså innebär att avståndet mellan länkarna är 0.5em. Tar du bort den sista nollan från den övre koden, blir avståndet åt samtliga håll 0.5em. Då skulle du få en glugg på 1em mellan länkarna.
HEJ!
Hmmmm, men så är det ju inte enligt dokumentationen?
Eller har jag missat något viktigt?
If you declare two values, the top and bottom margins will be set by the first value, the right and left margins by the second.
http://www.devguru.com/Technologies/css/quickref/css_margin.html
Hm, ja man lär sig något nytt varje dag! :bire
*drar mig ur diskussionen*
J.N. skrev:
Varför blir det inte 2x8px mellan menyerna?
Padding är 0.5em, 1em är 16px, följdaktligen är hälften 8px, och 8px från övre knappen och 8px från undre blir 16px mellan menyerna.
Men, det blir alltså endast 8px, vilket jag förutsätter är rätt, men hur motiveras det?
Det beror på collapsing margins
Summan av två på varandra liggande boxars marginaler blir samma som det högsta av de två marginalernas värden.
Peter S skrev:
margin:0.5em 0;Är ekvivalent med:
margin-top:0.5em; margin-right:0;Vilket alltså innebär att avståndet mellan länkarna är 0.5em. Tar du bort den sista nollan från den övre koden, blir avståndet åt samtliga håll 0.5em. Då skulle du få en glugg på 1em mellan länkarna.
Nästan... ;) Det är ekvivalant med:
margin-top:0.5em; margin-right:0; margin-bottom:0.5em; margin-left:0; }
Som Insider säger så kollapsar marginaler, vilket gör att avståndet bara blir 0.5em (inte 1em). Du kanske kan använda padding istället för margin. :)
zcorpan skrev:
Nästan... ;) Det är ekvivalant med:
margin-top:0.5em; margin-right:0; margin-bottom:0.5em; margin-left:0; }Som Insider säger så kollapsar marginaler, vilket gör att avståndet bara blir 0.5em (inte 1em). Du kanske kan använda padding istället för margin. :)
Jo, jag förstod det efter att ha läst sidan som Johnny länkade till. :bire