Solve the problem of element spacing caused by inline-block

Display:inline-block: The front end knows that its role is to render an object as an inline object, but the object's contents are presented as a block object.

Have the following code

　　CSS Code copy content to clipboard

2. <div class="ac-btn">
4. <a href= "#" class="Btn-save"></a>
6. <a href= "#" class="Btn-print"></a>
8. </div>
12. . ac-btn a{background:URL(.. /img/action.png) no-repeat; width:73px; height: 25px; display: inline-block;}
14. . ac-btn. btn-save{background-position: 0 0;}
16. . ac-btn. btn-print{background-position:-73px 0;}

This renders the following

There is a gap between 2 elements, then the problem comes

Why is there a gap?

The reason is that inline-block allows spaces, and the culprit for voids is the whitespace, including line breaks.

How do I eliminate gaps?

Set font-size:0 on parent element

The above CSS code is changed to

CSS code copy content to clipboard

. ac-btn {font-size:0}

. ac-btn A{background:url (... /img/action.png) No-repeat;width:73px;height:25px;display:inline-block;}

. ac-btn. btn-save{background-position:0 0;

. ac-btn. Btn-print{background-position: -73px 0;}

Block,inline and Inlinke-block Detail comparison

Display:block

The 1.block element is exclusive to one row, and multiple block elements are each new row. By default, the width of the block element fills its parent element width automatically.

The 2.block element can set the Width,height property. A block-level element is still an exclusive row, even if it is set to a width.

The 3.block element can set the margin and padding properties.

Display:inline

1.inline elements do not have a single line, and multiple adjacent inline elements are arranged in the same row until a row is arranged before a new line is changed, and its width varies with the contents of the element.

The 2.inline element setting width,height property is invalid.

The margin and padding properties of the 3.inline elements, horizontal padding-left, Padding-right, Margin-left, margin-right all produce margin effects, but the vertical padding-top, Padding-bottom, Margin-top, margin-bottom do not produce margin effects.

Display:inline-block

The

is simply rendering the object as a inline object, but the object's contents are rendered as a block object. The inline objects are then lined up in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both the width and height of the block and the inline of the peer characteristics.