Inline (inline) element spacing solution

Inner Satoshi (inline) element

display: inline;

The width and height are determined by the sub-elements. You cannot manually modify the width and height. The sub-elements are generally placed with text elements, which are side by side with other inline elements on the same line

Inline elements can not change the width and height, resulting in some property is not available, such as: widthseries, series,height , , , , .margin-topmargin-bottompadding-toppadding-bottomline-height

Commonly used inline <span>tags: <img>, <em>, <strong>, ,<i>

You may encounter this situation with inline elements,

<div>
    <span style="background: #ccf">内联元素</span>
    <span style="background: #fcc">内联元素</span>
</div>

White space between inline elements

Forming a blank area because <span>there is between the transport, in html, spaces, tabs, carriage returns are all white space, white space will be considered as a plurality of spaces, the size of the space by the parent <div>of the font-sizedecision.
注意：只有内联(内联块)与内联(内联块)之间的空白符才会形成一个空格，文本元素(除空白符)也是属于内联元素。

There are four solutions to the blank area

• To <div>set font-size: 0;in <span>on the font-sizeset back

• Comment out whitespace

• Arrange the spans in the same row and close together

• Use float float, some occasions do not allow float, this is not applicable

  ---

This article is reprinted by other bloggers. If there is any infringement, please contact to delete the
source of reprint: https://segmentfault.com/a/1190000009139500