CSS margin-bottom Property

Posted in CSS Tutorial

Updated on Sep 04, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The margin-bottom property in CSS is used to set the space outside the bottom edge of an element.

This property is part of the CSS Box Model and helps control the layout of web pages by adding space between elements.

By adjusting the margin-bottom, you can ensure that elements on your page are spaced appropriately and do not overlap.

💡 Syntax

The syntax for the margin-bottom property is simple and can accept various units for the value.

Syntax

Copied

element {
  margin-bottom: value;
}

Here, value can be a length, percentage, or the keyword auto.

🎛️ Default Value

The default value of the margin-bottom property is 0. This means that there is no additional space outside the bottom edge of the element unless explicitly set.

🏠 Property Values

Value	Description
length	Specifies a fixed margin using units such as px, em, rem, vw, etc. Example: margin-bottom: 20px;
percentage	Defines the margin as a percentage of the containing block's width. Example: margin-bottom: 10%;
auto	The browser calculates a suitable margin. This value is rarely used with `margin-bottom`.
inherit	The property takes the computed value of its parent element's `margin-bottom`.

📄 Example

In this example, we set the bottom margin of a paragraph element to 20 pixels.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS margin-bottom Example</title>
  <style>
    p {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Bottom Margin</h1>
  <p>This paragraph has a bottom margin of 20px, creating space below it.</p>
  <p>The space between this paragraph and the one above is due to the bottom margin.</p>
</body>
</html>

🖥️ Browser Compatibility

The margin-bottom property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a widely used property and should work consistently across different platforms and devices.

🎉 Conclusion

The margin-bottom property is a fundamental aspect of CSS layout design, allowing you to control the spacing around elements on your web pages.

By understanding how to use this property effectively, you can create clean and organized layouts that enhance the user experience. Experiment with different values to see how they affect the layout of your elements and achieve the desired spacing in your design.