-
CSS Margins and padding
There are various ways to put space between elements on the page one way is to use margins.
margins can be added into the css like this:
margin-top: 2em;
If I add this into my rules for h1 say, then I’m adding a space of 2 times the font size on top of the heading.
A lazy man’s secret is that while you can add margin-top, margin-left, etc. you don’t have to, because if you just use the word margin: it adds the numbers you put in a clockwise direction starting with top right bottom and then left.
So if i put
margin: 2em 4em 0 6em
that will add those dimensions all around this h1
e.g.
this text has a margin
(just to remind myself later - I had to add that margin into the HTML by giving that <p> a margin style, i.e. saying: <p style=” and then putting the margin details in>
Right now an even bigger lazy trick is if you want the margin to be the same for all sides then just put that number.
Padding works much in the same way, adding space around the tag. But if you have a background color too - it will increase the size of that too.
Posted on March 28, 2009
blog comments powered by Disqus