What are block level elements in html

青灯夜游

Release： 2023-02-17 17:01:24

Original

10462 people have browsed it

In HTML, block-level elements refer to elements whose display attribute is block. Usually block-level elements are displayed occupying one line in many browsers, and exclude other elements and other elements in the same line. In browsers, the block element appears in the shape of a rectangle and contains other elements.

What are block level elements in html

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Block element is also known as block element (block element), and its corresponding is inline element (inline element), which are concepts in the HTML specification. Most HTML elements are defined as block-level elements or inline elements. Block-level elements usually start (and end) with a newline when displayed by the browser.

Block-level elements are relatively domineering. By default, they occupy an entire line each time, and subsequent content must also be displayed on a new line. For example:

,

Each block-level element occupies one row of height by default. After adding a block-level element to a row, other elements cannot be added (except after float). When two block-level elements are edited continuously, they will automatically wrap and display on the page. Block-level elements can generally nest block-level elements or inline elements;

<html>
<head>
<style type="text/css">
p{ 
border: thin dotted #FF0000;
}
div{ 
border: 1px solid yellow;
}
</style>
</head>
<body>
<p>这是一个p元素</p>
<p>这是一个p元素</p>
<div>这是一个div元素</div>
<div>这是一个div元素</div>
</body>
</html>

Copy after login

What are block level elements in html

Block-level elements generally appear as containers to organize structures, but this is not always the case. Some block-level elements, such as

; others can contain both block-level and row-level elements.

DIV is the most commonly used block-level element, and the display:block element style is all block-level elements. They are always expressed in the form of a block, and are arranged vertically in sequence with the sibling blocks of the same level, filling up the left and right sides.

Characteristics of block elements

①, always start on a new line;

②, height, line height and outer edge Both spacing and padding can be controlled;

③. The width defaults to 100% of its container, unless a width is set.

④. It can accommodate inline elements and other block elements

[Recommended tutorial: "html video tutorial"]

The above is the detailed content of What are block level elements in html. For more information, please follow other related articles on the PHP Chinese website!