Question

在the following HTML snippet中，我在我的“＃”桶的边框下面有一些额外的间距像素。 div由于某种原因。

我一直在为自己的原因而烦恼，但无法弄清楚如何摆脱它。有人可以帮忙吗？

谢谢！

    <style>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
            font-size: 100%;
            box-sizing: border-box;
            list-style: none;
            border-collapse: collapse;
            border-spacing: 0;
            border: none;
            font-family: "Segoe UI"
        }

        .pane {
            width: 260px;
            background-color: #666;
            color: #fff;
            font-size: 9px;
        }

        .fieldWell {
            height: 100%;
            overflow: auto;
        }

        .bucket {
            display: inline-block;
            padding: 4px 0;
            border-bottom: 1px solid #333;
            color: #a6a6a6;
            width: 100%;
        }

        .bucket > .caption {
            float: left;
            width: 80px;
            padding-left: 12px;
            font-size: 9px;
        }

        .properties {
            float: right;
            min-height: 28px;
            width: 163px;
            margin-right: 12px;
            border: 1px dashed #666;
            border-radius: 4px;
            background-color: #4a4a4a;
        }

        .property {
            width: 157px;
            height: 22px;
            margin: 2px 0 2px 2px;
            padding-left: 4px;
            background: #333;
            border-radius: 4px;
            border: 1px solid #212121;
        }

        .property .caption {
            float: left;
            width: 100px;
            line-height: 21px;
        }
    </style>
</head>
<body>
    <article class="pane">
        <section class="fieldWell">
            <div>
                <div class="bucket">
                    <h1 class="caption">Foo</h1>
                    <div class="properties">
                        <div class="property">
                            <h2>
                                <span class="caption">Hello world</span>
                            </h2>
                        </div>
                        <div class="property">
                            <h2>
                                <span class="caption">Hi there</span>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
</body>

Answer 1

在float:left元素CSS上使用display:inline-block代替.bucket，

.bucket {
  float: left;
  padding: 4px 0;
  border-bottom: 1px solid #333;
  color: #a6a6a6;
  width: 100%;
}

Answer 2

我认为这与display: inline-block有关。我打赌使用display: block代替，并且避免float ed元素或使用clearfix都可以。

没有任何花车的演示：https://jsfiddle.net/sk27bca9/5/

使用block和.clearfix

演示：https://jsfiddle.net/sk27bca9/4/

Answer 3

.fieldWell {
height: 100%;
overflow: auto;
border-bottom: 1px solid #333;
}

.bucket {
display: inline-block;
padding: 4px 0px 0px 0px;
color: #a6a6a6;
width: 100%;
}

https://jsfiddle.net/sk27bca9/3/

enter image description here

Answer 4

使用display:block;并清除浮动。

CSS：

.bucket {
    display: block;
    padding: 4px 0;
    border-bottom: 1px solid #333;
    color: #a6a6a6;
    width: 100%;    
}
.bucket:after {
    content:"";
    clear:both;
    display:block;
}

演示：http://jsfiddle.net/GCu2D/712/

CSS：为什么我的边界下方有间距？

4 个答案: