Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the difference between HTML block elements and inline elements". The explanation in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the difference between HTML block elements and inline elements".

Inline element

In html,

Equal tags are typical inline elements. Of course, block elements can also be displayed as inline elements by setting display:inline;, so that block-level elements have the characteristics of inline elements.

P {display:inline;}...

I want to become an inline element!

Characteristics of inline elements:

1. On the same line as other elements, not only one line

2. The height, width and top-bottom margin of the element cannot be set.

(ps: the top and bottom margins of inline elements, the margin-top and margin-bottom attributes do not work, while the margin-left and margin-right attributes can. The padding attributes top, bottom, left, right can also work, but the padding-top attribute can only be held up to the top of the browser, the padding-top is higher than the top of the browser, and the element does not move down. You can use padding when adding backgrounds to inline elements, but the background color overrides the surrounding elements. )

3. The width of an element is the width of the picture or text contained in the element, which cannot be set.

*: gaps occur when there are "carriage returns", "tab" and "spaces" between the elements in the line.

Solution: write on one line without spaces, carriage returns and other symbols in the middle.

Massive element

In html

、

, and are block elements. Inline elements can be displayed as block elements by setting display:block;.

Such as: a {display:block;}

Characteristics of block-level elements:

1. Each block element starts on a new line, and the following elements start on a separate line (exclusive line)

2. The height, width, row height and top and bottom margins of the element can be set.

3. If the element width is not set, it accounts for 100% of its parent container (consistent with the width of the parent element)

Inline massive element

Inline block element (inline-block) has the characteristics of both inline element and block element, and the code display:inline-block is to set the element to inline block element.

The label is this kind of inline block label.

Characteristics of inline block elements:

1. And other elements are all on one line

2. The height, width, row height and top and bottom margins of the element can be set.

Thank you for your reading, the above is the content of "what is the difference between HTML block elements and inline elements". After the study of this article, I believe you have a deeper understanding of what is the difference between HTML block elements and inline elements. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.