Learn CSS Margin




In CSS3 we use the Margin property to wrap the content, the CSS Margin is the outermost layer, we use CSS margin to define an empty space that we can use to create space between one element and another.


CSS margin allow us to have full control over the element margins, we can control the margin for each side of en element, top, bottom, right, left.


In CSS there are 4 properties that define the margin of each side of an element:


  • margin-top
  • margin-bottom
  • margin-right
  • margin-left

Property Description
margin-top create the top margin of an element
margin-bottom create the bottom margin of an element
margin-right create the right margin of an element
margin-left create the left margin of an element
margin Modern CSS also allow us to be efficient
and specify all the margin properties at once
example: margin: 80px 80px 50px 120px;


This container has a margin of 50px




In the next example we use CSS margin property to control four sides of an HTML class:


Code Example:

Control the margins of the container class:


            <style>
     .container {
  margin-bottom: 80px;
  margin-top: 80px;
  margin-left: 50px;
  margin-right: 120px;
}
</style>
 
  
Try yourself >>






CSS Margin - Shorthand Property


Modern CSS also allow us to be efficient and specify all the margin properties at once


This is the default order of the CSS Margin - Shorthand Property from top to bottom:


  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Code Example:


            <style>
      .container
       {
        margin: 80px 80px 50px 120px;
}
</style>
 
  
Try yourself >>

In this case margin-top property will be 80px, margin-right property will be 80px, margin-bottom property will be 50px, margin-left property will be 120px :



However if you define only two properties:


Code Example:


            <style>
      .container
       {
        margin: 80px 80px;
}
</style>
 
  

In that case, top and bottom margins are 80px


And, right and left margins are 80px



If you define one property only, all four sides will have the same value:


Code Example:


            <style>
      .container
       {
        margin: 80px;
}
</style>
 
  





Learn about CSS Margin Collapse


In CSS top and bottom margins may collapse into a single margin, that can not happen with right and left margins


Code Example:


            <style>
      h1 {
  margin: 0 0 60px 0;
}

p {
  margin: 20px 0 0 0;
}
</style>

 
  
Try yourself >>

the h1 element has a bottom margin of 60px and the paragraph element has a top margin of 20px, the vertical margin between h1 and paragraph should been 80 pixels but, because of the margin collapse, the margin ends up being 60px.









Learn about CSS margin:auto Value


In CSS we may create an auto value to the margin property.


In CSS we use the margin:auto value to center a block element horizontally.


The definition of auto varies with elements and context. In margins, auto can mean one of two things: take up the available space or 0 px. These two will define different layouts for an element.


Code Example:


            <style>
     .container
      {
      margin: auto;
  width: 250px;
  border: 2px solid green;
}
</style>

 
  
Try yourself >>





Learn about CSS inherit Value


In the next example we let the right margin of the paragraph be inherited from the parent element:


Code Example:


            <style>
    .container
    {
      margin-right: 100px;
  border: 2px solid green;
}

p.box
 {
  margin-right: inherit;
}
</style>

 
  
Try yourself >>







learn CSS margin in 1 day, you are in the right place to learn css step by step, FreeCodeWiki is one of the best css learning websites for free.



Navigation