Question

所以我一直在为我的网站设计一些简单的标题栏，我只是注意到我在栏中的嵌套div之间有一个意想不到的空间。

以下是它的进展情况。

HTML

    <body>
    <div class='main-container'>

        <div class='button'>
            <p> Issues </p>
        </div>

        <div class='button'>
            <p> Calendar </p>
        </div>

        <div class='button'>
            <p> Staff </p>
        </div>

        <div class='button'> 
            <p> Submit </p>
        </div>

    </div>
</body>

...使用此CSS

.main-container {
    width: auto;
    height: 40px;
    float: left;
    vertical-align: middle;
    font-family: 'Arial';
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    }

.button {
    text-align: center;
    display: inline-block;
    height: 100%;
    width: 100px;
    // borders are to illustrate spaces
    border-left: 1px solid black;
    border-right: 1px solid black;
    }

.button:hover {
    background-color: #D3D3D3;
    }

它看起来像这样（因为我没有足够的声誉，我必须做一个简单的图形表示）：

|问题| |日历| |员工| |提交|

有没有办法删除div之间的空格？

Answer 1

这很可能是由于身体的边缘。通常的做法是重置＆＃34;每个浏览器自动添加的继承样式。

This is a pretty common CSS reset.

Answer 2

将float: left;用于div按钮。

.button {
text-align: center;
display: inline-block;
float:left;
height: 100%;
width: 100px;
// borders are to illustrate spaces
border-left: 1px solid black;
border-right: 1px solid black;
}

我认为它会解决你的问题。

div之间的意外空间

2 个答案: