Scribd
Upload
22 views

Css Margins

Margins are used to create space around elements outside any borders. CSS provides control over margins on each side of an element using properties like margin-top, margin-right, etc. or the shorthand margin property. Margins can take values like length in px, % of containing element width, or inherit from the parent element. Negative values are also allowed.

Uploaded by

Leslie Perez
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

Css Margins

Margins are used to create space around elements outside any borders. CSS provides control over margins on each side of an element using properties like margin-top, margin-right, etc. or the shorthand margin property. Margins can take values like length in px, % of containing element width, or inherit from the parent element. Negative values are also allowed.

Uploaded by

Leslie Perez
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS MARGINS

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

The CSS margin properties are used to create space around elements, outside of any defined
borders.

With CSS, you have full control over the margins. There are properties for setting the margin for
each side of an element (top, right, bottom, and left).
CSS Margins
All the margin properties can have the following values:
auto - the browser calculates the margin

length - specifies a margin in px, pt, cm, etc.

% - specifies a margin in % of the width of the containing element

inherit - specifies that the margin should be inherited from the parent element

NOTE : NEGATIVE VALUE ARE ALLOWED


<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of
80px.</div>

</body>
</html>
Margin - 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 following individual margin properties:

margin-top
margin-right
margin-bottom
margin-left
So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;


top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<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>

</body>
</html>
The 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.
The inherit Value
<style>
div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}
</style>
</head>
<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>

You might also like