Saturday, March 3, 2018

Css margin (Css tutorial)


Hello guys! good afternoon and welcome to another section of my tutorial on CSS. In this tutorial i want to talk about CSS Margins.
The margin property defines the space around a HTML element. It is possible to use negative values to overlap content.

The values of a margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.


You can also read: Html - Text Links

We have the following properties to set an element margin.
  • The margin specifies a shorthand property for setting the margin properties in one declaration.
  • The margin-bottom specifies the bottom margin of an element.
  • The margin-top specifies the top margin of an element.
  • The margin-left specifies the left margin of an element.
  • The margin-right specifies the right margin of an element.
Now let's take a look at how to use these properties with examples.

The Margin Property
The margin property allows you to set all the properties of the four margins in one declaration. Here is the syntax to set a margin around a paragraph:

<style  type="text/css">
p {margin:  10px}
All four margins will be 10px
</p>

p {margin:  10px  3%}
Top and bottom margin will be 10px, while the left and right margin will be 3% of the total width of the HTML document.
</p>

p {margin:  10px  3%  -7px}
Top margin will be 10px, left and right margin will be 3% of the total width of the HTML document, while the bottom margin will be -7px.
</p>

p {margin:  10px  3%  -7px  auto}
Top margin will be 10px, right margin will be 3% of the total width of the HTML document, bottom margin will be -7px, while the left margin will be set by the browser.
</p>
</style

Below is an example:

<p style="margin: 10px;  border: 2px solid black;">
All four margin will be 10px.
</p>

<p style="margin: 10px  3%;  border: 2px solid black;">
Top and bottom margin will be 10px, while left and right margin will be 3% of the total width of the HTML document.
</p> 

<p style="margin: 10px  3%  -7px;  border: 2px solid black;">
Top margin will be 10px, left and right margin will be 3% of the total width of the HTML document, while the bottom margin will be -7px.
</p>

<p style="margin: 10px  3%  -7px  auto;  border: 2px solid black;">
Top margin will be 10px, right margin will be 3% of the total width of the HTML document, bottom margin will be -7px, while the left margin will be set by the browser.
</p>

You can also read: Html Elements

The margin-bottom Property
The margin-bottom property allows you to set the bottom margin of an element. It can have a value in length, %, or auto.

Below is an example:

<p  style="margin-bottom: 10px;  border: 2px  solid  black;">
This is a paragraph with a specified bottom margin of 10px.
</p>

<p  style="margin-bottom: 6%;  border: 2px  solid  black;">
This is another paragraph with a specified bottom margin in percentage.
</p>

The margin-top Property
The margin-top property allows you to set the top margin of an element. It can have a value in length, %, or auto.

Below is an example:

<p  style="margin-top: 10px;  border: 2px  solid  black;">
This is a paragraph with a specified top margin of 10px.
</p>

<p  style="margin-top: 6%;  border: 2px  solid  black;">
This is another paragraph with a specified top margin in percentage.
</p>

You can also read: Html Basic Tags

The margin-left Property
The margin-left property allows you to set the left margin of an element. It can have a value in length, %, or auto.

Below is an example:

<p  style="margin-left: 10px;  border: 2px  solid  black;">
This is a paragraph with a specified left margin of 10px.
</p>

<p  style="margin-left: 6%;  border: 2px  solid  black;">
This is another paragraph with a specified left margin in percentage.
</p>

The margin-right Property
The margin-right property allows you to set the right margin of an element. It can have a value in length, %, or auto.

Below is an example:

<p  style="margin-right: 10px;  border: 2px  solid  black;">
This is a paragraph with a specified right margin of 10px.
</p>

<p  style="margin-right: 6%;  border: 2px  solid  black;">
This is another paragraph with a specified right margin in percentage.
</p>

Alright guys! this is it for this tutorial on CSS margins. Feel free to ask your questions in areas you don't understand very well.
Like our facebook page and also subscribe with us to get our tutorial posts delivered directly to your emails.
You can follow us on twitter
You can also follow us on google+

Links to previous tutorials on CSS : Css Introduction (Css tutorial) ,  Syntax (Css tutorial)  ,  Inclusion (Css tutorial) , Css Measurement Units (Css tutorial)  , Backgrounds (Css tutorial) , Fonts (Css  tutorial)  , Text (Css tutorial)  , Images (Css tutorial)  , Links (Css tutorial) , Css table (Css tutorial) , Css border (Css tutorial)  
Share:

0 comments:

Post a Comment