CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



margin-block-end

Margin-Block-End is a CSS property that defines the margin of an element at the end of its block-level container. It is also known as the bottom margin. This property is used to create space between the element and the container's bottom edge.

The margin-block-end property is a part of the CSS Box Model. It is used to define the space between the element and its surrounding elements. The margin-block-end property is used to create vertical space between elements. It is particularly useful when working with text and other block-level elements.

The margin-block-end property can be used with any block-level element, such as div, p, h1, and so on. It is also used with pseudo-elements, such as ::before and ::after.

How to Use Margin-Block-End

The margin-block-end property can be set using different units of measurement, such as pixels, ems, rems, and percentages. The default value of margin-block-end is zero.

Here is an example of how to use margin-block-end:

    
        p {
            margin-block-end: 20px;
        }
    

This code sets the margin-block-end of the paragraph element to 20 pixels. This means that there will be a space of 20 pixels between the bottom of the paragraph and the bottom of its container.

The margin-block-end property can also be set using negative values. This can be useful when you want to overlap elements. Here is an example:

    
        p {
            margin-block-end: -10px;
        }
    

This code sets the margin-block-end of the paragraph element to -10 pixels. This means that the paragraph will overlap the element below it by 10 pixels.

Browser Support

The margin-block-end property is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer.

Conclusion

The margin-block-end property is a useful CSS property that allows you to create space between an element and its block-level container. It is particularly useful when working with text and other block-level elements. The margin-block-end property can be set using different units of measurement, such as pixels, ems, rems, and percentages. It is supported by all modern browsers, except for Internet Explorer.

References

Activity