How to remove spacing between inline-block elements in CSS? (multiple methods)-CSS Tutorial-php.cn

How to remove spacing between inline-block elements in CSS? (multiple methods)

不言

Release： 2019-04-04 11:56:23

forward

2976 people have browsed it

The content of this article is about how to remove the spacing between inline-block elements in CSS? (Multiple methods), it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Phenomenon description

In the true sense, there will be a gap between the elements presented horizontally inline-block when displayed in newlines or separated by spaces. This is because the browser parses , which will cause line breaks and so on to be read as a space.

2. How to remove spaces

We can remove line breaks and spaces between elements, so that the spacing will naturally disappear, but this will reduce the readability of the code and is not advisable.

<div>
        <a href="">
        链接1</a><a href="">
        链接2</a><a href="">
        链接3</a><a href="">
        链接4</a>
    </div>

    <div>
        <a href="">链接1</a
        ><a href="">链接2</a
        ><a href="">链接3</a
        ><a href="">链接4</a>
    </div>

    <div>
        <a href="">链接1</a><!--
        --><a href="">链接2</a><!--
        --><a href="">链接3</a><!--
        --><a href="">链接4</a>
    </div>

Copy after login

Use negative margin values. However, due to external uncertainties and the problem of the extra negative margin value of the last element, this method is not recommended.

<style>
        a {
            background: pink;
            display: inline-block; 
            padding: .5em 1em;
            margin: -3px;
        }
</style>
<body>
    <div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
    </div>
</body>

Copy after login

③ Set font-size:0 to the parent, and then set our font size in the child element, so that the spacing between elements can also be removed.

<style>
        div{
            font-size: 0;
        }
        a{
            font-size: 16px;
            background: pink;
        }
</style>
<div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
</div>

Copy after login

④ Delete the closing tag.

<div>
        <a href="">链接1        
        <a href="">链接2        
        <a href="">链接3        
        <a href="">链接4      
    </div>

Copy after login

⑤ Use letter-spacing.

<style>
        div{
            letter-spacing: -6px;
        }
        a{
            letter-spacing: 0;
            background: pink;
        }
</style>
<div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
</div>

Copy after login

⑥ Use word-spacing.

<style>
        div{
            word-spacing: -6px;
        }
        a{
            word-spacing: 0;
            background: pink;
        }
</style>
<div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
</div>

Copy after login

【Related recommendations: CSS video tutorial】

The above is the detailed content of How to remove spacing between inline-block elements in CSS? (multiple methods). For more information, please follow other related articles on the PHP Chinese website!