What is the CSS Margin of a Box?

Boxdim

About

This page is about the margin in CSS.

The margin of a box determines the vertical and horizontal distance between two boxes.

Boxdim

Example

Base

The margin of a box determines the vertical and horizontal distance between boxes.

  • The CSS
.boxLittleMargin {
    margin: 10px 10px;
    background-color: aqua
}
.boxBigMargin {
    margin: 60px 60px;
    background-color: aqua
}
  • The HTML
<div class="boxLittleMargin">Box with a little margin</div>
<div class="boxBigMargin">Box with a big margin</div>
<div class="boxLittleMargin">Box with a little margin</div>
  • The result:

Horizontal

Horizontal positioning

Charactertistics

Transparent Area

This area is transparent. It means that it's not painted for the background.

Negative Values allowed

Margin properties can utilize negative values (padding cannot)

Margin don't add up between boxes (Collapsible)

If the 2 contingent boxes specify the same margin in the same direction, they will not add up.

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.

Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Shorthand

margin: margin-top margin-right margin-bottom margin-left;
margin: 10px       10px         10px          10px;

margin: margin-top margin-right-and-left margin-bottom;
margin: 10px       10px                  10px;

margin: margin-top-and-bottom margin-right-and-left;
margin: 10px                  10px;

margin: margin-right-and-left;
margin: 10px

The longhand properties are:

Documentation / Reference





Discover More
Css Padding
CSS - Padding

The padding area is the space between the content of the box and its border. In the below image, this are the areas: TP (top padding) BP (bottom padding) LP (left padding) RB (right padding)...
Boxdim
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
CSS - Block Box Layout

CSS - Block Box Layout CSS Block are box that can be seen as stacked element (such as paragraphs, section, ...) Block boxes: * create a block formatting context (layout) * and are involved in any...
Firebug Box Sizing
CSS - Box sizing (property and definition)

The box-sizing property is used to alter the default box model used to calculate widths and heights of elements. The width and height are defined as the width and height: of the or of the depending...
Css Flex Align Content
CSS - Flex Box

flex is a layout model that lays out object in a single axis focused on space distribution and content alignment. flex means: flexible layout as flexible size Flex layout is superficially similar...
Boxdim
CSS - Spacing (Box Dimension)

spacing in CSS is not a specific term but refers generally to the setting of the following of a box properties: - the padding set how far from the border the text should be and is an area taken into...
CSS - Transform

in CSS note that in CSS, you can also translate with margin Example:
Css Horizontal Alignement Result
CSS Block - Align (Left, Center, Right)

How to align a visual element with a block display horizontal positioning article You can align visual element on two level: on the box level: the box is aligned on the text level: the text in the...
How to align horizontally at the center and right position with CSS ?

This page shows you how to arrange horizontally CSS elements. See See justify-content articleleftright In case of absolute positioning: where: left:50%: the block starts at 50% left...



Share this page:
Follow us:
Task Runner