CSS - Margins


Margin Properties

Individual Margin Properties

CSS provides four individual margin properties to control the margins on each side of an element:

  1. margin-top: Sets the margin space above an element. It controls the vertical space between the top edge of the element and the adjacent element or container's border.

  2. margin-right: Sets the margin space to the right of an element. It controls the horizontal space between the right edge of the element and adjacent element or container's border.

  3. margin-bottom: Sets the margin space below an element. It controls vertical space between bottom edge of an element and adjacent element or container's border.

  4. margin-left: Sets margin space to left of an element. It controls horizontal space between left edge of an element and adjacent elements or container's border.

These individual properties allow you to set different values for each side, giving you control over spacing around elements.

Shorthand Margin Property

CSS also provides a shorthand margin property that allows you to set all four margins in a single declaration, which is convenient for setting multiple values at once.

Example: Shorthand Margin Property

margin: top right bottom left;
  • If you provide a single value, it sets same margin on all four sides.

    margin: 10px;
  • If you provide two values, first value sets top and bottom margins, second value sets left and right margins.

    margin: 10px 20px;
  • If you provide three values, first value sets top margin, second value sets left and right margins, third value sets bottom margin.

    margin: 10px 20px 30px;
  • If you provide four values they set margins in order of top, right, bottom, and left (clockwise).

    margin: 10px 20px 30px 40px; 

Using shorthand can save time and reduce the amount of CSS code you need to write, especially when you want to set the same value on multiple sides in a concise way.

Margin Values

CSS provides several types of values that you can use to set the margins of an element:

Length Values

  • Length values are commonly used for setting margins.
  • They allow you to specify margins using units such as pixels (px), ems (em), rems (rem), and more.
  • For example, margin: 10px; sets a margin of 10 pixels on all sides of an element.
  • You can use different length units depending on your needs and the design requirements.

Percentage Values

  • Percentage values allow you to set margins relative to the width of the containing element.
  • For example, margin: 10%; sets a margin equal to 10% of the width of the containing element on all sides.
  • Percentage values are useful when you want the margins to adapt based on the size of the container.

Auto Value

  • The auto value lets the browser automatically calculate and set the margin.
  • When you set it to auto, it will take available space and distribute it evenly on both sides.
  • For example, margin: auto; will center an element horizontally within its container if it has a fixed width.

Inherit Value

  • The inherit value allows an element to inherit margin values from its parent element.
  • When you set it to inherit, it will take the same margin values as its parent.

Margin Values Examples

/* Length values */
.element1 {
  margin: 10px;

/* Percentage values */
.element2 {
  margin: 5%;

/* Auto value */
.element3 {
  width: 200px;
  margin: auto;

/* Inherit value */
.parent {
  margin: 20px;
.child {
  margin: inherit;

Using these different types of margin values helps control spacing around elements in a flexible way.

Margin Collapse

Margin collapse is a behavior in CSS where the top and bottom margins of adjacent elements combine into one margin. This happens when the margins of two elements touch each other without any content, padding, or borders separating them.

Margin collapse occurs in these situations:

Adjacent Siblings

When two vertical margins of adjacent sibling elements touch, the larger margin value is used as the collapsed margin, and the smaller margin is collapsed to zero.

Parent and First/Last Child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from its first child block's margin-top or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from its last child's margin-bottom. The collapsed margin ends up outside the parent.

Empty Blocks

If there is no border, padding, inline content, height or min-height to separate a block's top and bottom margins from each other then they collapse.

To prevent margin collapse:

  1. Add Border or Padding Adding a border or padding to one element will prevent their margins from touching and collapsing.

  2. Use Clearance Property Applying clear: both; to an element will create clearance between margins and prevent them from collapsing.

  3. Apply Overflow Property Setting overflow: auto; or overflow: hidden; on the parent element will create a new block formatting context preventing collapse between parent and children.

  4. Use Flexbox or Grid Layout When using flexbox or grid layout systems like flex items' margins do not collapse with each other.

Understanding how this works helps you control spacing between elements on your web pages better by knowing when it happens how you can stop it if needed for consistent layouts in CSS.

Example title

<p>This is a paragraph.</p>

Some text

body { 

Some more text

Negative Margins

CSS allows you to use negative values for margins, which can be useful in certain layout scenarios. Negative margins can be applied using the same individual margin properties (margin-top, margin-right, margin-bottom, margin-left) or the shorthand margin property.

When you apply a negative margin to an element, it shifts the element in the opposite direction of the specified margin.

  • A negative margin-top pulls the element upward, overlapping the element above it.
  • A negative margin-right pulls the element to the right, overlapping the element to its right.
  • A negative margin-bottom pulls the element downward, overlapping the element below it.
  • A negative margin-left pulls the element to the left, overlapping the element to its left.

Negative margins can create interesting layout effects and control positioning in ways that are not possible with positive margins alone.

Overlapping Elements

By applying a negative margin to an element, you can make it overlap or cover adjacent elements. This is useful for creating layered designs.

Pulling Elements Out of Containers

Negative margins can pull an item outside its containing block. For example, applying a negative margin-left makes an item extend beyond its parent container's left edge.

Adjusting Spacing

Negative margins reduce spacing between items by moving them closer together.

Centering Elements

You can combine negative and positive margins to center items horizontally or vertically by applying equal negative margins on opposite sides and setting width or height accordingly.

Use caution with negative margins and test your layout across different devices and browsers as they may lead to unexpected behavior if not used properly.

CSS Example of Negative Margins

/* Overlapping elements */
.element1 {
  margin-right: -20px;

/* Pulling elements out of containers */
.element2 {
  margin-left: -50px;

/* Adjusting spacing */
.element3 {
  margin-bottom: -10px;

/* Centering elements */
.element4 {
  width: 200px;
  margin-left: -100px;

Centering Elements with Margins

Margins can center elements horizontally within their containers. By setting the left and right margins to auto, an element with a set width will be centered within its parent container.

To center an element horizontally using margins:

  1. Set a fixed width for the element you want to center. This can be done using the width property.

Example: Set a fixed width

   .element {
     width: 200px;
  1. Set the left and right margins to auto. This will automatically calculate and distribute the available space evenly on both sides of the element.

Example: Set margins to auto

   .element {
     width: 200px;
     margin-left: auto;
     margin-right: auto;

You can also use the shorthand margin property to set both margins at once:

Example: Using shorthand margin

.element {
  width: 200px;
  margin: 0 auto;

By combining the fixed width and auto margins, the element will be horizontally centered within its container.

You can also use other CSS properties to center elements both horizontally and vertically. Some common techniques include:

  • Using text-align: center; on the parent container to center inline or inline-block elements.
  • Using flexbox with justify-content: center; and align-items: center; on the parent container.
  • Using CSS Grid with justify-items: center; and align-items: center; on the parent container.


Centering elements example

<div class="container">
  <div class="element">Centered Element</div>
.container {
  text-align: center;

.element {
  width: 200px;
  margin: 0 auto;
  display: inline-block;

.element is centered horizontally using a combination of margin: 0 auto; and display:inline-block, while .container uses text-align:center.

Using margins in combination with other centering techniques gives you flexibility in centering elements within their containers.

Margin and Box Model

Margins play a key role in the CSS box model, which defines how elements are sized and spaced on a web page. According to the box model, every element consists of content, padding, borders, and margins.

The relationship between margins and the box model is as follows:

  1. Margins are outside the element's border: Margins are the outermost part of the box model and sit outside an element's border. They create space between the element and its neighboring elements or the container's edges.

  2. Margins are transparent: Unlike borders and padding, margins are transparent and do not affect the element's background color or image.

  3. Margins do not affect the element's dimensions: By default, margins do not add to an element's width or height. The width and height properties set the size of the content area, excluding margins.

However, margins can indirectly affect an element's total width and height in these ways:

  1. Margins can push elements apart: When you apply margins to adjacent elements, they create space between them. This can increase how wide or tall a container seems because its contents move apart.

  2. Margins contribute to total size: If you use box-sizing: border-box;, margins are not included in an element’s specified width and height. However, they still add to its total size within its container.

  3. Margins affect layout and positioning: Margins can push elements away from each other or from a container’s edges, influencing overall layout on your page.

To calculate an element’s total width and height:

  • Total width = width + left padding + right padding + left border + right border + left margin + right margin
  • Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Box Model Example

.element {
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
  • Total width = 200px + 20px (left) + 20px (right) + 1px (left) + 1px (right) + 10px (left) + 10px (right) = 262px
  • Total height = 150px + 20px (top) + 20px (bottom) + 1px (top) + 1px (bottom) + 10px (top) + 10px (bottom) = 212px

Understanding how margins interact with other parts of CSS helps you create well-spaced layouts.