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

Most people do not understand the knowledge points of this article "how to convert block elements into other elements in html5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to convert block elements into other elements in html5" article.

Conversion method: 1, add "display:inline;" style to block elements, you can convert block elements into inline elements; 2, add "display:inline-block;" to block elements, you can convert block elements into inline block elements.

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

Convert block elements to other elements in html5 (inline or inline blocks)

Characteristics of massive elements:

(1) be able to identify width and height

(2) the upper and lower sides of margin and padding are effective for it.

(3) automatic line wrapping

(4) multiple block element tags are written together, and the default arrangement is from top to bottom.

Characteristics of inline elements:

(1) setting width and height is invalid

(2) for margin, only the left and right directions are valid, and the upper and lower directions are not valid; the padding setting is valid for both left and right directions, that is, it will enlarge the space.

(3) Line wrapping will not be done automatically.

Characteristics of inline block elements:

(1) No automatic line wrapping

(2) be able to identify width and height

(3) the default arrangement is from left to right

In html5, you can use the display attribute to convert block elements to inline or inline block elements.

Convert display:inline; to inline elements

Convert display:inline-block; to inline block elements

Example:

P {background-color: # FFC0CB; height: 50px;}

Block element p

Block element p

Block element pmure-converted to inline element

Block element pmure-converted to inline element

Block element p

Block element pmure-converted to inline block element

Block element pmure-converted to inline block element

As you can see, block elements and inline block elements can set heights, but inline elements cannot; while inline elements and inline block elements do not wrap, and block elements will.

The above is about the content of this article on "how to convert block elements into other elements in html5". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.