How to understand the problem of css html span block non-wrapping

This article mainly explains "how to understand the css html span block non-wrapping problem". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand the css html span block non-wrapping problem".

The style of the span tag sets the width attribute and you will find that it has no effect.

If you set the display:block,width property, but now the span is the same as div.

If display:inline-block is set, the span is juxtaposed in the same line, and the width property takes effect.

The common value description of the element display attribute is:

Block: the default value for block objects. Force the object to be rendered as a block object, adding a new row after the object.

Inline: the default value for inline objects. Force the object to be rendered as an inline object, removing rows from the object.

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 will be presented on the same line.

Non: hides objects. Unlike the hidden value of the visibility property, it does not reserve its physical space for hidden objects.

For example:

The code is as follows:

This is a test.

Thank you for your reading, the above is the content of "how to understand the css html span block non-wrapping problem". After the study of this article, I believe you have a deeper understanding of how to understand the css html span block non-wrapping problem, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!