CSS
CSS Margins
CSS margins make an element visually appealing by adding extra space around it. They create a defined border around elements.
.box {
background: lightblue;
margin: 20px;
}Margin of individual sides
Using CSS margin properties, developers can set individual margins for each side of the elements. These include:
- Margin-bottom
- Margin-top
- Margin-left and
- Margin-right
A single CSS margin value creates borders on all an element’s corners.
Margin Top: This property creates a margin on the top of the element.
Margin Right: This property is used to set margins on the right side of an element.
Magin Bottom: Using this property, one can add a margin on the bottom of the element.
Margin Left: With this property, one can set a margin on the left side of the element.
.box {
background-color: #ffc107;
margin-top: 30px;
margin-right: 20px;
margin-bottom: 40px;
margin-left: 10px;
}Margin Property Values
Any CSS margin you create will have the following values:
- Auto – the value of the margin will be calculated by the browser.
- Length – it is specified in px, pt, cm, and other units.
- % – used to specify the width percentage of the margin that contains the element.
- Inherit – specifies whether or not the margin will be inherited from the parent element.
.box {
background-color: #81d4fa;
padding: 10px;
margin: auto; /* Auto margin - centers the box */
margin-top: 30px; /* Length value in px */
margin-left: 10%; /* Percentage value */
}CSS Margins can have negative values. The negative value indicates overlapping elements.
The auto Value
It centrally aligns the element within its container. The element automatically takes up the length and width according to the space.
.auto-box {
background-color: #81c784;
margin: auto; /* This centers the box */
text-align: center;
}The inherit Value
This CSS margin property allows the element to take up the specifications of the margin from the parent element.
.parent {
margin-left: 50px;
background-color: #c5e1a5;
}
.child {
margin-left: inherit;
background-color: #aed581;
}CSS Margin Formats
CSS margins can be applied to the elements in four different ways.
Single Value
In this method, a single value is provided, and the same value is applied to all four sides of the element. This means all four sides will have the same properties.
.box {
margin: 20px; /* Same margin on all four sides */
background-color: #ffcc80;
}Two Values
Using this method, two values are provided to the system. They will be used as CSS margins: one for the top and bottom margins and the other for specifying the properties of the right and left margins.
.box {
margin: 30px 10px; /* 30px top & bottom, 10px left & right */
background-color: #b39ddb;
}Three Values
CSS margins can be specified with three values. One defines the top margin, and the other two are the left, right, and bottom margins. In this method, the left and right margins usually have the same values.
.box {
margin: 20px 15px 10px; /* Top: 20px, Left & Right: 15px, Bottom: 10px */
background-color: #80deea;
}Four Values
With the four values of the CSS margin property, all four margins will have specific values.
.box {
margin: 25px 20px 15px 10px; /* Top, Right, Bottom, Left */
background-color: #ffd54f;
}CSS margins create space around the elements, giving them a clean look. Mastering this CSS property helps developers design a well-structured and visually appealing webpage.
