CSS display block properties and usage

 CSS display block stipulates that elements are presented in blocks. Compared to the same line of display inline , it is the opposite. When the attribute of an element such as multiple pictures or multiple paragraphs of text is set to block (display: block), these elements will be displayed in The effect of automatic line wrapping appears on the web page, unless you set other attributes, such as float or position .

CSS display block syntax example

<span style= "display:block">元素一</span> <span style= "display:block">元素二</span>

Present results

Element one
element two

In the example, we use two sets of <span></span> tags. Why use <span> tags instead of <div> tags? Because the attribute of the <div> tag itself is a block, it will automatically wrap without setting display:block, so in the example we use the <span> tag, and the <span> itself will not wrap automatically, but by adding display:block syntax , Change the attributes of these two groups of <span> tags to blocks, and it will wrap automatically!