Html CSS：为什么我的边框下面有间距？_Html_Css

Html CSS：为什么我的边框下面有间距？

html css

Html CSS：为什么我的边框下面有间距？,html,css,Html,Css,在中，出于某种原因，我在“bucket”div的边框下获得了一些额外的像素间距我一直在绞尽脑汁想为什么，但不知道如何摆脱它。有人能帮忙吗谢谢 <style> * { margin: 0; padding: 0; outline: 0; font-size: 100%; box-sizing: border-box;

在中，出于某种原因，我在“bucket”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>


* {
保证金：0；
填充：0；
大纲：0；
字体大小：100%；
框大小：边框框；
列表样式：无；
边界塌陷：塌陷；
边界间距：0；
边界：无；
字体系列：“Segoe用户界面”
}
.窗格{
宽度：260px；
背景色：#666；
颜色：#fff；
字体大小：9px；
}
菲尔德威尔先生{
身高：100%；
溢出：自动；
}
.桶{
显示：内联块；
填充：4px0；
边框底部：1px实心#333；
颜色：#A6；
宽度：100%；
}
.bucket>.caption{
浮动：左；
宽度：80px；
左侧填充：12px；
字体大小：9px；
}
.物业{
浮动：对；
最小高度：28px；
宽度：163px；
右边距：12px；
边框：1px虚线#666；
边界半径：4px；
背景色：#4a4a4a；
}
.财产{
宽度：157px；
高度：22px；
保证金：2px 0 2px 2px；
左侧填充：4px；
背景：#333；
边界半径：4px；
边框：1px实心#212121；
}
.property.caption{
浮动：左；
宽度：100px；
线高：21px；
}
福
你好，世界
你好

只需在

bucket

元素CSS上使用

float:left

而不是

display:inline block

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

我认为这与

display:inline block

有关。我打赌使用

display:block

替代，或者避免

float

ed元素，或者使用clearfix都可以

不带任何浮动的演示：

演示使用

块

和

和

：

使用显示：块并清除浮动
CSS:
演示：
你必须在fieldWell上使用100%高度吗？不幸的是，是的。真实场景更复杂，.fieldWell将包含多个桶。哇，太棒了！谢谢知道内联块为什么会导致工件吗？将其设为float
可能会导致父元素的布局出现问题。阅读本文，您完全正确。你知道为什么内联块会破坏它吗？不确定，但是一般来说，inline block是错误的工具。我得进一步研究。
.fieldWell {
height: 100%;
overflow: auto;
border-bottom: 1px solid #333;
}

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

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