Home >Web Front-end >HTML Tutorial >What are block level elements in html

What are block level elements in html

青灯夜游Original: 2021-03-02 17:04:4210472browse

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.

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to bold a paragraph in htmlNext article：How to bold a paragraph in html

See more

What are block level elements in html

,

Related articles