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.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five 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 Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW