It can let the inside of the line appear as blocks of elements, into the inline display, for example <div> DIV1 </div><div> DIV2 </div> here DIV1 and DIV2, respectively, but you gave them a property after the change <div style= "Display:inline" > DIV1 </div><div style= "Display:inline" > DIV2 </div> DIV1 and DIV2 are shown on the same line now, try it. And display:inline corresponds to the display:block,block will make the HTML tag that applied the CSS property into a block-level element, such as SPAN is displayed in the row, but you add the Display:block property is different <span style= "Display:block" > SPAN1 </span><span style= "Display:block" > SPAN2 </span>display: The classic use of inline is to use the <ul> <li> inline block in a single block, unless float inline is automatically ranked as a line, like text within a paragraph, and can be multiple lines. The function of Display:inline is to set the object as the inline element display, inline is the default value of inline object (PS: inline object is not automatically generated line-wrapping elements, such as span) and our general div is block-level elements, the default display property is block, However, if you set the display of the div to inline, multiple div can be displayed in one line as span. Display:inline correspondence does not show as display:nonedisplay:block corresponds not to hidden the elements that are not shown in the popular point style are not occupying a position, while elements of the style hidden are not displayed but still occupy the place.
Transitions between inline elements and block elements