Web Hosting Talk






PDA

View Full Version : margins in CSS

luxx
06-21-2008, 01:19 AM
I was looking into nifty corners and I came across something I didn't quite understand, maybe someone can help me out...

html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>
</p>

<h2>Rounded corners without images</h2>
<p>
</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

What do the 2 numbers represent after the margin? And what does em stand for?
pixelcop
06-21-2008, 02:17 AM
Hi,

you can have a margin at the top, bottom, on the left and on the right.

But instead of writing margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
you could just use:margin: 10px;
to have a 10px margin on all 4 sides - this is called "shorthand property".

Another example. If you write:margin: 10px 20px;
you will have a 10px margin at the top and bottom and a 20px margin on the left and right.

em is the size of the letter "M" and enables you to have relative margins etc.
A margin of 10px is always 10px, but a margin of 2em depends on the font size. If you have a bigger font size, the margin will be bigger, with a smaller font size the margin will be smaller.
Jay August
06-21-2008, 04:20 AM
pixelcop's explanation is a bit short, especially the part about the margins.

Indeed, CSS shorthand properties are used and to use them succesfully, you'll have to think of them as they are a square.

http://ep2up.com/jasper/upload/1214035908.gif

So if you see

margin: 10px 5px 2px 36px;

this means:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 2px;
margin-left: 36px;

So always start at the top of the square and go clockwise: top right bottom left. That's CSS shorthand!

The EM part is indeed the width of the letter M and the default size for browsers is 16pt. So if you put just 1em in the font-size of your <body> css, you'll see that all default texts are 16pt big. The biggest advantage of using relative sizes like em, that the ability to increase text size in Internet Explorer 6 still works. if you used a fixed size like px, you'll lose this functionality.
pixelcop
06-21-2008, 04:44 AM
Regarding the margin:

If you have 4 measurements, go clockwise, as amygdela explained, if you only have 2 measurements as in your example, the 1st one is for top and bottom, the 2nd one is for left and right.
pixelcop
06-21-2008, 04:51 AM
In your example h1, h2 and p have a margin of 0px on the top and bottom and a margin of 10px at the left and right.
pixelcop
06-21-2008, 05:02 AM
Sorry,
I'm really tired and unsorted today ...

To sum it up:

1 measurement = all 4 sides
2 measurements = 1st one for top and bottom, 2nd one for left and right
4 measurements = go clockwise, starting at the top