CSS Margins

CSS Margins is a transparent area around a box, which pushes other elements away from the box contents. The margin property is applied on four sides of an element top, right, bottom and left using,

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

along with the shorthand margin property type for setting all four properties at once 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.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

CSS Margins – Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the individual margin properties:

The margin proper with four values can be defined as

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
p {
  margin: 25px 50px 75px 100px;
}

CSS Margins-Collapsing:

When two elements have vertical margins which touch each other, they effectively merge into one another, which causes the Collapsing margins. This effect is explained with the following example:

To help illustrate what’s happening here, the .links class is on the last paragraph (<p class="links">) , which contains the two links inside it.

When people do something like this, they expect the margin between the middle paragraph and the links below it to be 80px (40px + 40px), but in reality, it’s 40px. The two margins are touching each other, so they merge into one another.

To push it even more, let’s give our <p>s a  margin-bottom to 100px:

CSS Margins- Values:

 Margin value is either a length of pixels, percentage value, auto, or inherit from the parent element.

CSS Margins- length and percentage value

It can have a value in length, % or auto. For example:

<!DOCTYPE html>
<html>
<head>
<style>
.no-margin {
    background-color:lightblue;
}
.with-margin {
    background-color:yellow;
    margin: 70px;
}
	.with-margin-percent {
    background-color:lightgreen;
    margin: 7%;
}
</style>
</head>
<body>
<p class="no-margin">No Margins</p>
<p class="with-margin">Contain Margin.</p>
	<p class="with-margin-percent">Contain Margin in percentage.</p>
</body>
</html>

If two values are provided in the margin property, the first will set the top and bottom margins and the second value applies to the right and left margins.

margin:25px,50px
  • top and bottom margins: 25px
  • right and left margins: 50px

Similarly, if three values are provided to the margin shorthand, the first applies to the top margin, second to the right and left margins, while the third value applies to the bottom margin.

margin:25px,50px,75px
  • margin from the top will be 25px
  • margin from the right and left will be 50px
  • margin from the bottom will be 75px

Notice how the unspecified margin is inferred from the value defined for its opposite side.

If you wish to set the values for all four sides, you can set them in this order: top, right, bottom, left.

margin: 25px,50px,75px,100px
  • margin from the top will be 25px
  • margin from the right will be 50px
  • margin from the bottom will be 75px
  • margin from the left will be 100px

if a single value is specified in the margin then it sets al the margins equally ie.,

margin:50px
  • margin on all the sides will be 50px

The figure below shows the equal margin of 50 pixels from all sides.

CSS Margins 2 1

CSS Margins-auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

div {
  width: 500px;
  margin: auto;
  border: 10px solid green;
}


CSS Margin-inherit value:

if inherit value is used as CSS Margins then values are inherited from the parent element. In this example of inherit value lets the left margin of the <p class=”ex1″> element be inherited from the parent element (<div>):

div {
  border: 10px solid red;
  margin-left: 200px;
}

p.ex1 {
  margin-left: inherit;
}

Comments are closed.