Home > Web Front-end > CSS Tutorial > What does display:inline mean?

What does display:inline mean?

coldplay.xixi
Release: 2020-06-30 16:45:51
Original
14678 people have browsed it

display:inline means to set the object to be displayed as an inline element. Inline is the default value for inline objects, and the commonly used div is a block-level element. The default display attribute is block, but the display of the div is If set to inline, multiple divs will be displayed on one line.

What does display:inline mean?

display:inline means:

Set the object to be displayed as an inline element, inline is an inline object The default value of (ps: inline objects are elements that do not automatically generate line breaks, such as span). The div we generally use is a block-level element, and the default display attribute is block. But if the display of the div is set to inline, multiple The div can now be displayed in one line like a span.

It can change the inline display of block elements into inline display, for example

<div> DIV1 </div>
 
<div> DIV2 </div>
Copy after login

Here DIV1 and DIV2 occupy one line each, but they change after you add attributes to them

<div style= "display:inline "> DIV1 </div>
 
<div style= "display:inline "> DIV2 </div>
Copy after login

DIV1 and DIV2 are now displayed on the same line. Give it a try.

Corresponding to display:inline is display:block. block will make the HTML tag to which the CSS attribute is applied become a block-level element. For example, SPAN is displayed inline, but if you add the display:block attribute, it will become a block-level element. It’s different

<span style= "display:block "> SPAN1 </span>
 
<span style= "display:block "> SPAN2 </span>
Copy after login

Recommended tutorial: "css tutorial"

The above is the detailed content of What does display:inline mean?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template