When the label uses Display:inline-block, the object is presented as an inline object, but the object's contents are presented as a block object. Adjacent inline objects are presented in the same line, allowing spaces. (To be exact, the element to which this attribute is applied renders as an inline object and the surrounding elements remain on the same line, but you can set the properties of the width and height plot elements)
With inline-block horizontally rendered elements, there will be spacing between line-wrapping or space-separated, a simple example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
UL Li {
List-style:none;
}
UL Li Span {
Display:inline-block;
width:40px;
height:20px;
Background:pink;
}
</style>
<body>
<ul>
<li>
<span>1</span>
<span>2</span>
</li>
</ul>
</body>
The effect of the page rendering is as shown in the following illustration:
Picture 1
Two elements between the space, and browser, the size of the space resolution is also different, which is to restore the effect of the picture to a certain extent, how to solve it
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
