Web Development

Having Margins Around

Having Margins Around is the section 13 of Beginner’s Guide to CSS.

Every publication need margins. Books, magazines, news letters and all sort of publication materials have margins, and so do web page contents.

The CSS margin properties define the space around elements. Which means it clears an area around element outside to the border. The fact is you cannot assign any background color to it. And it is completely transparent always.

Like as the border and outline, this property also includes top, bottom, right and left sides and can be changed independently. Also the shorthand margin property can change all sides at once.

Look at the following example.

[code language=”css”] p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
[/code]

The colored box is a paragraph element which have a margin around. You’ll see a transparent area around this.

You can define the size of this transparent margin as a value or as a percentage. By using a negative value you can overlap content. You can specify the value by pixels (px), points (pt), and centimeters (cm).

 

The colored box is a paragraph element which have a margin around. You’ll see a transparent area around this.

This paragraph box is going to overlap the above paragraph box.

[code language=”css”] #p1{
margin: 100px 150px 100px 50px;
background-color: yellow;
}
#p2{
margin: -116px 150px 100px 50px;
background-color: pink;
}
[/code]

In the above code snippet we use the margin shorthand property. I guess you now know what sides the four values represent. If you don’t know look back our border section in the tutorial.


In this section we gone through another property of the CSS box model. Margins comes in handy when working with division tags to create layouts. Proper usage of margins can make your web page display correctly on any display device. In the next section we are going to catch up our last property in the CSS Box Model.

WHAT’S NEXT?

Learn what is CSS Padding.

About the author

Sandeep Likhar

Sandeep Likhar from India, Blogger, eBook Designer and Founder of LetsDnD. Having 6 years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Comment