在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>
最佳答案
只需在 .bucket 元素 CSS 上使用 float:left 而不是 display:inline-block，
.bucket {
float: left;
padding: 4px 0;
border-bottom: 1px solid #333;
color: #a6a6a6;
width: 100%;
}
关于html - CSS:为什么我的边框下方有间距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30476099/