CSS-Margin Property

Margin is a word that you may have come across in your  day to day life. The same word can be used in different contexts.  Folks into business use this term very often. For them margin means profit or how much they would gain from a particular business deal. And people into writing would be using notebooks with margins or drawing them to separate content.

download

This is margin in reference to the first context. The picture reminds me of the economics class which I took in school. Something which I loved studying at that point of time.

notebook

The second picture is what you would normally observe in a notebook with margins on all sides.

In CSS there is a property called Margin which would pertain to the latter context we defined earlier. Margins are used to give spacing between elements in a web page. We can specify the margin by using four dimensions top, right, bottom and left. The units are in pixels (px).

So it goes like this

margin: top,right,bottom,left;

For Example-

margin:2px, 3px, 5px, 4 px;

Which means 2 pixels from the top, 3 pixels from the right, 5 pixels from the bottom and 4 pixels from the left.

If we want to apply the margin property only to one particular dimension we can write-

margin-top:

margin-right:

margin-bottom:

margin-left:

 

If we want equal spacing all sides we would write margin: 2px; which would mean 2 pixels from all sides.

Here is another example which would illustrate the concept of margins. In the figure below you would observe two boxes combined together.

Capture

Once we apply the margin property to the bottom box, let’s see what happens!!

 

Capture2

You will see that the 2nd box has separated from the one on top. I applied 20 pixels margin-top property to the box in the bottom. So, box 2 is 20 pixels from box 1.

 

I hoped you learnt something today and enjoyed your reading.

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s