Home > Article > Web Front-end > How to remove spacing between inline-block elements in CSS? (multiple methods)

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

不言forward: 2019-04-04 11:56:232917browse

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>

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>

③ 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>

④ Delete the closing tag.

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

⑤ 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>

⑥ 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>

【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!

css margin 低代码 word

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What is div+css?Next article：What is div+css?

See more

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

Related articles