Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the difference between inline elements and block-level elements in html". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "what is the difference between inline elements and block-level elements in html" can help you solve the problem.

Differences: 1, block-level elements will be displayed on a single line, not in-line elements, adjacent in-line elements can be displayed in a row; 2, block-level elements can be set width and height, in-line elements can not. Connection: block-level elements can be converted to inline elements in the "display:inline" style, and inline elements can be converted to block-level elements in the "display:block" style.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The difference between inline elements and block-level elements in html

The difference between inline elements and block-level elements in html Block-level elements own a row. By default, the width of the element within the row automatically fills up the width of its parent element. The element within the row adjacent to the width will be arranged in the same line until the line cannot fit. The width of the element varies with the content of the element. You can set the width,height attribute for the element within the line to set the width. Invalid height attribute can set margin and padding attributes only margin-left, margin-right, padding-left, and padding-right play a role in the margins of the elements in the line, and other attributes have no margin effect. Corresponding to display:block, corresponding to display:inline

The relationship between inline elements and block-level elements in html

Inline elements and block-level elements can be converted to each other

Block-level elements can be converted to inline elements using the "display:inline" style

Inline elements can be converted to block-level elements using the "display:block" style

Example 1:

Div {background-color: pink;} .box {display: inline / * Block level element to inline element * /} Block level element 1 block level element 2 block level element 3

Example 2:

Span {background-color: pink;} .box {display: block / * inline element to block level element * /} inline element 1 inline element 2 inline element 3

That's all for "what's the difference between inline elements and block-level elements in html". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.