Display Block: CSS Guide & Examples

1 year ago
Noah Thompson
1 minute

“Display: block” is a CSS property used to specify that an element should be displayed as a block-level element.

  1. Block-level elements will occupy a single line and the elements following it will start on a new line.
  2. Block elements can have properties such as width, height, padding, and borders set.
  3. Block-level elements can contain inline elements and other block-level elements.

To utilize the “display: block” property, you can apply it to the CSS styles of HTML elements, such as:

<p style="display: block;">这是一个块级元素。</p>

You can also define a class in a CSS file and apply it to HTML elements, as shown below:

<style>
    .block-element {
        display: block;
    }
</style>

<p class="block-element">这是一个块级元素。</p>

By utilizing the above method, the element can be displayed as a block-level element.

bannerAds