CSS margins serve to create space around components outside of any specified borders. CSS offers full control over the margins. There are properties for defining the edge of a component on each side (right, top, base, and left).
CSS contains attributes for specifying the edge of a component on each side.
- margin-top
- margin-bottom
- margin-right
- margin-left
The following values can be assigned to all margin properties:
- inherit: This denotes that the margin should be passed down from the parent element.
- length: It defines a margin in pixels and centimetres, among other units.
- auto: The margin is calculated automatically by the browser.
- %: It defines a margin in percentage of the width of the contained element.
Instance 1: The HTML div is used to style the paragraph in the given example. The paragraph’s margins are as follows: right margin 50px, top margin 50px , left margin 100px, bottom margin 100px, background-color #FFE6F7. The border width will be 4px and will be solid #367E18.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #FFE6F7;
border: 4px solid #367E18;
margin: 50px 50px 100px 100px;
}
</style>
</head>
<body>
<h2 style="color: red">javaTpoint</h2>
<b>Set the paragraph element's margin</b>
<div>
College is widely regarded as one of the most memorable years of a person's life.
It is not at all like school.
College life exposes us to fresh experiences and things we were not previously acquainted with.
Some people associate college with enjoying life to the fullest and partying hard. Others, on the other hand, must take their careers seriously and work hard in order to have a brighter future.
Nonetheless, we will all recall our college years fondly. Not everyone is able to attend college.
People are unable to attend college for a wide range of reasons.
They may not always have a solid financial foundation to do so, and they may have other obligations to meet.
Those who have gone through the college experience frequently desire they could go to the past and relive everything.
</div>
</body>
</html> Output:
Instance 2: Throughout the given example, the margin is the same, the width is 300px, and the paragraph is in the middle because it has margin: auto. The border width is 80px and the colour is purple.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
margin: auto;
border: 75px solid #F07DEA;
}
</style>
</head>
<body>
<h2 style="color: red">javaTpoint</h2>
<b>Using margin:auto</b>
<p>
College is widely regarded as one of the most memorable years of a person's life.
It is not at all like school.
College life exposes us to fresh experiences and things we were not previously acquainted with.
Some people associate college with enjoying life to the fullest and partying hard. Others, on the other hand, must take their careers seriously and work hard in order to have a brighter future.
Nonetheless, we will all recall our college years fondly. Not everyone is able to attend college.
People are unable to attend college for a wide range of reasons.
They may not always have a solid financial foundation to do so, and they may have other obligations to meet.
Those who have gone through the college experience frequently desire they could go to the past and relive everything.
</p>
<div>
Because it contains <i>Margin: auto;</i> this div will be horizontally centred.
</div>
</body>
</html> Output:
