CSS Margin



CSS Tutorial  >  Margin

As we saw from the box model, margin is the space outside of the border, and is used to determine spacing among the different elements. In a box, there are four sides. So, we can specify margins up to the 4 sides:

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

    A fifth property, margin, is used as a shortcut for the above four properties.

    Margins can be specified in 3 ways: length, percentage, or auto. Let's take a look at an example:

    #container {
    margin-top:5px;
    margin-left:10%;
    margin-right:auto;
    margin-bottom:20px;
    border: 1px solid 000000;
    }

    The following HTML

    <div id="container">
    This is an example for the margin
    </div>

    renders the following:

    This is an example for the margin

    Notice the margin between the box and the top, left, and bottom of the light green area are 5px, 10%, and 20px, respectively.

    Margin shortcuts

    All four margins can be specified on a single line using the margin property. The syntax is as follows:

    margin: [margin-top] [margin-right] [margin-bottom] [margin-left]

    The order is very important here. The first element is always the top margin, the second is always the right margin, the third is always the bottom margin, and the fourth is always the left margin.

    Next: CSS Border




    Copyright © 2021   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact
  • 老湿机69福利区无码_老子影院午夜伦无码_开心亚洲五月丁香五月