A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements below:

Block-level content - Glossary | MDN

Block-level content

In CSS, content that participates in block layout is called block-level content.

In a block layout, boxes are laid out one after the other, vertically, beginning at the top of a containing block. Each box's left outer edge touches the left edge of the containing block.
A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, thereby creating a "block".

Note: The above behavior of block layout changes if the containing block's writing-mode is set to value other than the default value.

Note: HTML (HyperText Markup Language) elements historically were categorized as either "block-level" elements or "inline" elements. As a presentational characteristic, this is now specified by CSS.

Examples

In this example, two paragraph (<p>) elements are put in a <div>.

<div>
  <p>
    This the first paragraph. The background color of these paragraphs have been
    colored to distinguish them from their parent element.
  </p>
  <p>This is the second paragraph.</p>
</div>

The paragraph(<p>) elements are block-level by default. That is why they are displayed in block layout:

p {
  background-color: #8abb55;
}
See also

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4