Portal Home > Knowledgebase > Articles Database > margins in CSS
margins in CSS
| Posted by 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...
What do the 2 numbers represent after the margin? And what does em stand for?
|
| Posted by 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 you could just use:to have a 10px margin on all 4 sides - this is called "shorthand property".
Another example. If you write: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.
|
| Posted by JayNL, 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
this means:
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 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.
|
| Posted by 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.
|
| Posted by 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.
|
| Posted by 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
|
Add to Favourites 
Print this Article
Also Read
