What is the role of margin-bottom in CSS?

The margin-bottom attribute of CSS is used to define the bottom margin of an element. Bottom margin is the white space between an element and the element behind it. By setting the margin-bottom attribute, you can control the spacing between an element and the elements behind it.

The syntax of margin-bottom is as follows:

selector {
    margin-bottom: value;
}

Among them, selector represents the element selector to which the style rule is applied, and value represents the value of the bottom margin to be set. You can use pixels (px ), percentage (%), em or rem and other units.

The margin-bottom attribute can use positive, negative, or zero values ​​to define the size of the lower margin. A positive value moves the element down, a negative value moves the element up, and zero means no bottom margin.

The following are some specific code examples to help better understand the role of margin-bottom:

Example 1: Positive lower margin

<style>
    p {
        margin-bottom: 20px;
    }
</style>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

In the above code , the distance between the two paragraphs is 20 pixels.

Example 2: Negative margins

<style>
    p {
        margin-bottom: -20px;
    }
</style>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

In the above code, the distance between the first paragraph and the second paragraph becomes -20 pixels, that is, the distance between the first paragraph and the second paragraph becomes -20 pixels. The second paragraph overlaps.

Example 3: Sub-zero margins

<style>
    p {
        margin-bottom: 0;
    }
</style>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

In the above code, there is no distance between the two paragraphs, they are closely connected.

It should be noted that the margin-bottom attribute only affects the spacing between the element and the elements behind it, but does not affect the spacing between the element and its parent element. If you want to adjust the spacing between an element and its parent element, you should use the corresponding attributes, such as margin-top, margin-left, margin-right, etc.

To sum up, the margin-bottom property of CSS is used to control the spacing between an element and the element behind it. The bottom margin can be adjusted by setting a positive value, a negative value, or zero. This is very useful in web page layout, giving designers greater control over the position and arrangement of elements.

The above is the detailed content of What is the role of margin-bottom in CSS?. For more information, please follow other related articles on the PHP Chinese website!