Embedded Files
CSS Margins
CSS Margins
A margin is the space surrounding an element's border in CSS, whereas padding is the space between an element's border and its content. In other words, the margin property governs the space outside an element, whereas the padding property governs the space within an element.
Margin - Individual Sides
Margin - Individual Sides
CSS allows you to set the margin on each side of an element:
margin-top
margin-right
margin-bottom
margin-left
The following values can be assigned to all margin properties:
auto - the margin is calculated by the browser
length - defines a margin in pixels, points, centimeters, and so on.
% - specifies a margin in percentage of the contained element's width.
inherit - indicates that the margin should be passed down from the parent element.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 110px, a right margin of 110px, a bottom margin of 110px, and a left margin of 110px.</div>
<div>This div element has a top margin of 110px, a right margin of 110px, a bottom margin of 110px, and a left margin of 110px.</div>
</body>
</html>
CSS
div {
border: 1px solid darkgreen;
margin-top: 110px;
margin-bottom: 110px;
margin-right: 110px;
margin-left: 110px;
background-color: lightgreen;
}
Margin - Shorthand Property
Margin - Shorthand Property
To simplify the code, all margin properties may be specified in a single property.
The margin property is a shorthand property for the individual margin properties listed below:
margin-top
margin-right
margin-bottom
margin-left
So here's how it goes:
If the margin property has four different values:
margins: 25px, 50px, 75px, and 100px;
The top margin is 25px.
The right margin is 50 pixels.
The bottom margin is 75 pixels.
The left margin is 100 pixels.
% - specifies a margin in percentage of the contained element's width.
inherit - indicates that the margin should be passed down from the parent element.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The margin shorthand property - 4 values</h2>
<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>
<hr>
</body>
</html>
CSS
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The margin shorthand property - 3 values</h2>
<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>
<hr>
</body>
</html>
CSS
div {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: lightblue;
}
If the margin property has two values:
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The margin shorthand property - 2 values</h2>
<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>
<hr>
</body>
</html>
CSS
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
If the margin property has one value:
margin: 25px;
all four margins are 25px
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The margin shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right margin of 25px.</div>
<hr>
</body>
</html>
CSS
div {
border: 1px solid black;
margin: 25px;
background-color: lightblue;
}
The auto Value
The auto Value
AutoValue is a Java source code generator and library that generates source code for value objects or value-typed objects. To produce a value-type object, just annotate an abstract class with the AutoValue annotation and build your class.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Use of margin: auto</h2>
<p>To horizontally center the element within its container, set the margin attribute to auto. The element will then fill the required width, with the leftover space divided equally between the left and right margins:</p>
<div>
Because this div has margin: auto;, it will be horizontally centered.
</div>
</body>
</html>
CSS
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
The inherit Value
The inherit Value
Each property can additionally have a cascaded value of 'inherit,' which implies that for a given element, the property uses the calculated value of the element's parent as the provided value.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>
CSS
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
Page updated
Google Sites
Report abuse