CSS - margin-bottom Property
The margin-bottom property sets the width of the margin at the bottom of an element.
A positive value moves it away from neighboring elements, whereas a negative value brings it closer.
Possible Values
The following list covers all the possible values of margin-bottom property.
<length> - The fixed value of the margin's size.
<percentage> - The percentage of the margin measured in relation to the contained block's inline size, or the writing-mode defined width in a horizontal language.
auto - The browser selects a suitable value to use on its own.
Applies to
All elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Syntax
margin-bottom = <length-percentage> | auto
CSS margin-bottom - Basic Example
Here is an example where all the different values that can be passed to the margin-bottom CSS property:
<html> <head> <style> p { background-color: rgb(201, 238, 240); border: 1px solid black; width: fit-content; } .margin-px { margin-bottom: 30px; } .margin-perc { margin-bottom: 10%; } .margin-em { margin-bottom: 3em; } .margin-auto { margin-bottom: auto; } .margin-neg { margin-bottom: -10px; } </style> </head> <body> <p class="margin-px"> The bottom margin is 30px. </p> <p class="margin-perc"> The bottom margin is 10%. </p> <p class="margin-em"> The bottom margin is 3em. </p> <p class="margin-auto"> The bottom margin will be set by the browser. </p> <p class="margin-neg"> The bottom margin is -10px. </p> </body> </html>
inherit - when you want the bottom margin of a child element to match the bottom margin of its parent element, use the property inherit.
Note: inherit value can be used only on child elements and not on parent element.
CSS margin-bottom - Inherit
Here is an example where the margin-bottom of a child element is inherited from the parent element−
<html> <head> <style> .p { margin-bottom: 20%; } p.example { margin-bottom: inherit; border: 1px solid #4CAF50; } </style> </head> <body> <h4>margin-bottom property - inherit</h4> <p>The margin-bottom is 20% for parent element.</p> <p class="example">A child element where the bottom margin is inherited from the parent (p) and is 20%.</p> </body> </html>
To Continue Learning Please Login
Login with Google