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

This article introduces how to explore the differences of inline | block | inline-block in CSS display. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Describe the differences and relationships among the three attributes of CSS display:inline | block | inline-block. Block displays elements as block-level elements, inline displays elements as inline elements, and CSS display:inline-block renders objects as inline objects, but the contents of objects are rendered as block objects. The inline object next to it is rendered on the same line, allowing spaces.

Explain the differences between CSS display:inline | block | inline-block in detail

◆ CSS display:block

CSS display:block is to display elements as block-level elements.

The characteristics of the block element are:

Always start on a new line.

Height, row height and top and bottom margins can be controlled.

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

, and are examples of block elements.

◆ CSS display:inline

CSS display:inline is to display elements as inline elements.

The characteristics of the inline element are:

And other elements are on one line.

Height, row height and top and bottom margins are unchangeable

Width is the width of its text or picture, which cannot be changed.

, and are examples of inline elements.

◆ CSS display:inline and block can control the row width and height of an element. You need to switch between them as follows:

Let an inline element start with a new line

Keep block elements and other elements on one line

Controls the width of the inline element (especially useful for navigation bars)

Controls the height of the inline element

You can set a background color of the same width as the text for a block element without setting the width.

CSS display:inline-block renders the object as an inline object, but the contents of the object are rendered as block objects. The inline object next to it is rendered on the same line, allowing spaces.

Element characteristics of CSS display:inline-block:

The object is rendered as an inline object, but the contents of the object are rendered as block objects. The inline object next to it is rendered on the same line, allowing spaces. (to be exact, the elements that apply this property are rendered as inline objects, and the surrounding elements remain in the same line, but the attributes of the width and height parcel elements can be set.)

Not all browsers support this attribute. Currently supported browsers are: Opera and Safari do not recognize the use of display:inline-block,IE for inline elements in IE, but using display:inline-block will trigger layout under IE, which makes inline elements have the symptom of CSS display:inline-block attribute. From the above analysis, it is not difficult to understand why setting display:inline-block attributes on block elements under IE does not achieve the effect of inline-block. At this time, the block element is only triggered by the CSS display:inline-block layout, and it is originally a row layout, so after trigger, the block element is still the row layout, rather than rendering the block element as an inline object as in Opera.

How do block elements achieve the effect of CSS display:inline-block under IE?

There are two ways:

1. Use the CSS display:inline-block attribute to trigger the block element, and then define display:inline to render the block element as an inline object (two display have to be placed in two CSS declarations to have an effect. This is a classic bug of IE. If you define display:inline-block first, and then set display back to inline or block,layout will not disappear). The code is as follows (… Other attribute contents that are omitted):

Div {display:inline-block; … } div {display:inline;}

2. Directly set the block element to inline object rendering (set the attribute CSS display:inline), and then trigger the layout of the block element (such as zoom:1, etc.). The code is as follows:

Div {display:inline;zoom:1; … }

The following is an example to illustrate the difference and usage of the three:

Div,span {background-color:green;margin:5px; border:1pxsolid#333;padding:5px;height:52px;color:#fff;} .b {display:block;} .i {display:inline;} div.ib {display:inline-block;} div.ib {display:inline;} a.ib {display:inline-block;} a.ib {display:block;} span.v {padding:0;margin:0;border:0; vertical-align:middle Height:100%} divdisplay:block divdisplay:inline divdisplay:inline-block spandisplay:inline spandisplay:block adisplay:block vertical-align:middle

[Ctrl+An all choose to copy hint: you can modify part of the code first, and then click run]

On how to explore the inline | block | inline-block differences in CSS display to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.