CSS margin-bottom Property

CSS margin-bottom property sets the bottom side margin to HTML Element(s).

The syntax to specify a value for margin-bottom property is

margin-bottom: value;

The following table gives the possible values that could be given to margin-bottom property.

ValueDescriptionExamples
lengthAny valid CSS length unit. Refer CSS Length Units tutorial.margin-bottom: 10px;margin-bottom: 5pt;margin-bottom: 2cm;
Percentage ValueBottom margin in percent of the width of the containing element.margin-bottom: 20%;
initialSets margin-bottom to default value.margin-bottom: initial;
inheritInherits margin-bottom value from its parent element.margin-bottom: inherit;

Examples

In the following examples, we set bottom margin to HTML Element(s) with a few allowed values for margin-bottom CSS property.

ADVERTISEMENT

Simple Example

The following is a simple example, where we set margin-bottom for paragraph with 50px.

index.html

Different Values for margin-bottom

The following is a simple example, where we set different margin-bottom values for paragraphs.

index.html

margin-bottom property with CSS Length Units

In the following example, we apply margin-bottom property to paragraphs with a few different CSS Length Unit values.

index.html

margin-bottom property with Percentage Values

In the following example, we apply margin-bottom property to paragraphs with a few different percentage values.

If margin-bottom is specified in percentage values, and if width of the HTML element changes, then the margin also changes. For example, try to resize the browser window, and observe the bottom margin for these HTML Elements.

index.html

margin-bottom property for a few HTML elements

In the following example, we take a few HTML elements like h1, p, a, and pre, and set margin-bottom for these.

index.html

Conclusion

In this CSS Tutorial, we learned about margin-bottom property, and how to use this property for HTML Elements, with examples.