CSS

CSS Margin Bottom Example

1. Introduction

It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like padding and margin which help with this. They both essentially add space around an HTML element, but with a key difference. While the padding property adds or increases the space between the element and its own border, the margin property adds space outside its own border.

The margin property can be used to add space in all directions around the element – left, right, top and bottom. In this post, we’ll delve deeper into the margin-bottom property.
 
 

2. CSS margin-bottom property

As the name suggests, this property sets the bottom margin of an HTML element. Interestingly, its value can be set to positive or negative values – positive values will increase the space/distance between the element and other elements below it, while negative values will have the opposite effect.

2.1 Usage syntax

The value of the margin-bottom property can be either of the following:

  • length – This can be in cm, pt, px, em etc. (default = 0)
  • percentage – This is the value in percentage
  • auto – This tells the browser to calculate the bottom margin automatically
  • initial – Sets the property to its default value
  • inherit – Inherits the margin-bottom value from the parent element

2.2 A simple example

Create an HTML file called example.html and paste the following contents into it:

example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Margin Bottom Example</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<div class="wrapper">
		<div class="section1">Section 1</div>
		<div class="section2">Section 2</div>
	</div>
</body>
</html>

Next, create a stylesheet called style.css and paste the following contents into it:

style.css

.section1 {    
    height: 30px;
    margin-bottom: 10px;
}
.section2 {    
    height: 30px;
}
.wrapper {    
	border: 1px solid black;	
    width: 200px;    
    background-color: gray;
}
div {
    width: 200px;
    background-color: white;
}

Make sure you have saved both the files, and open example.html in your browser. Here’s what it should look like:

Fig. 1: Highlighted margin space between two sections
Fig. 1: Highlighted margin space between two sections

The grey colored area between the two sections represents the space added by the margin-bottom property specified for Section 1. You can play around with its value to see how it affects the spacing between the sections.

3. About collapsing margins

Another interesting point to note, as far as the margin property in general is concerned, is its behavior in case of elements which are adjacent to each other and aligned vertically (top or bottom). In case margin-top and margin-bottom are specified for the elements touching each other, the margin value which is actually applied is the greater of the two specified values.

For example, from the previous example, consider section1 and section2 as stacked vertically with margin-bottom and margin-top specified as 30px and 10px respectively. In this case, the total margin between them will be 30px, instead of 40px which would seem like the logical total value of the margin.

3.1 Collapsing margins in action

As we discussed, let’s re-use the same example.html file from our previous example. Now, modify the margin-bottom value for section1, and add a margin-top property to section2. Your style.css file should look like this (changes are highlighted):

style.css

.section1 {    
    height: 30px;
    margin-bottom: 30px;
}
.section2 {
    height: 30px;
    margin-top: 10px;
}
.wrapper {    
	border: 1px solid black;	
    width: 200px;    
    background-color: gray;
}
div {
    width: 200px;
    background-color: white;
}

Now refresh example.html in your browser. The gray area represents the margin gap, as shown in the below screenshot:

Fig. 2: Collapsing margins between 2 div elements
Fig. 2: Collapsing margins between 2 div elements

The actual margin between the elements is a total 30px, and not 40px as logic would otherwise suggest.

3.2 Why they are useful

Collapsing margins, though an obscure concept, can come in handy in certain scenarios:

  • Empty elements don’t take up their allotted margin area, helping to avoid inconsistent spacing.
  • Allow for an increased scope of standardization in declaring margins for various page elements.
  • They also apply to elements which are nested.

4. Download the Source Code

This was an example for the CSS margin-bottom property.

Download
You can download the full source code of this example here: CSSMarginBottomExample.zip

Jenson Jose

Jenson currently works as a Lead Developer on various network automation projects, in one of the leading telecom MNCs. In his spare time, he enjoys reading fiction and gaming.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button