XHTML and CSS - Margin
Margin
In this tutorial we'll be covering CSS margins, the margin is the area outside the border and outside the padding. Let's make two paragraph's because it'll probably make easier to see what a margin is.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { background-color: yellow; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
When you view this in your browser you'll see by default it has about 15 pixels, so by default paragraphs have a margin between them. Let's say you write a article and you made it into a few paragraphs and you feel they're too far apart from each other, well you can fix this with the margin property. Just like padding you can change your margin over all and with left, right, top and bottom. First we'll pretty much remove the margin to make our paragraphs close together by setting the margin to 1 pixel.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { background-color: yellow; margin: 1px; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
If you want to space out your paragraphs you could set the margin property higher, let's set the margin to 40 pixels to see that.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { background-color: yellow; margin: 40px; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
Like I said earlier in this tutorial you can change the margin in two ways, overall and one side at a time like padding margin-top, margin-bottom, margin-left and margin-bottom.

Page generated in 0.0056 seconds.