Question

我正在创建一个带有几个div的表madde，并且我在第一行（样式为head）和其余部分之间有一个额外的空间，只有前两列（div）。在这里你可以看到很清楚：

enter image description here

没有样式属性导致这个空间，至少我无法找到它的原因。

我已经在jsfiddle上复制了它，你可以看到它还设置了额外的空间：DEMO

这里我带来HTML＆amp; Syle相关代码：

HTML：

<div class="tableWrap">
<div class="tableHeader">
    <div class="contentColumn60">
        <span class="tableHeaderText">Turno</span>
    </div>
    <div class="contentColumn20">
        <span class="tableHeaderText">Tipo</span>
    </div>
    <div class="contentColumn10">
        <span class="tableHeaderText">Editar</span>
    </div>
    <div class="contentColumn10">
        <span class="tableHeaderText">Reactivar</span>
    </div>
</div>
<div class="tableContent">
    <div class="contentColumn60">
        <span class="tableContentText">Mañana(17:00 - 21:00)</span>
    </div>
    <div class="contentColumn20">
        <span class="tableContentText">Mañanas</span>
    </div>
    <div class="contentColumn10">
        <a href="#"><div class="editIcon"></div></a>
    </div>
    <div class="contentColumn10">
        <a href="#"><div class="discontinueIcon"></div></a>
    </div>
</div>
    <div class="tableContent">
    <div class="contentColumn60">
        <span class="tableContentText">Mañana(17:00 - 21:00)</span>
    </div>
    <div class="contentColumn20">
        <span class="tableContentText">Mañanas</span>
    </div>
    <div class="contentColumn10">
        <a href="#"><div class="editIcon"></div></a>
    </div>
    <div class="contentColumn10">
        <a href="#"><div class="discontinueIcon"></div></a>
    </div>
</div>
    <div class="tableContent">
    <div class="contentColumn60">
        <span class="tableContentText">Mañana(17:00 - 21:00)</span>
    </div>
    <div class="contentColumn20">
        <span class="tableContentText">Mañanas</span>
    </div>
    <div class="contentColumn10">
        <a href="#"><div class="editIcon"></div></a>
    </div>
    <div class="contentColumn10">
        <a href="#"><div class="discontinueIcon"></div></a>
    </div>
</div>

型：

.tableWrap{
    width: 100%;
    height:380px;
    border:#ccc 1px solid;
    border-radius:3px;
    box-shadow: 0 1px 2px #d1d1d1;
    margin: 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
    font-size:12px;
    color:#666;}

.tableHeader{
    height: 40px;
    width: 100%;
    background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #E0E0E0;
    border-left: 1px solid #E0E0E0;
    border-top: 1px solid #FAFAFA;
    display: inline-block;
    font-weight: 600;
}

.tableHeaderText{
     line-height: 40px;
     padding: 0 10px;
}

.tableContent{
    height: 40px;
    width: 100%;
}

.tableContentText{
    line-height: 40px;
    padding: 0 0 0 20px;
}

.contentColumn60{
    height: 40px;
    width: 58%;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    display: inline-block;
}

.contentColumn20{
    height: 40px;
    width: 20%;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    display: inline-block;

}

.contentColumn10{
    height: 40px;
    width: 10%;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    display: inline-block;
}

.discontinueIcon{
    width: 23px;
    height: 23px;
    background-size: 98%;
    background-image: url(images/error.png);
    background-repeat:no-repeat;
    margin: 0 auto;
}

.editIcon{
    width: 23px;
    height: 23px;
    background-size: 98%;
    background-image: url(images/edit.png);
    background-repeat:no-repeat;
    margin: 0 auto;
}

Answer 1

由于元素为inline-block，您可以使用vertical-align:top根据需要对齐它们。值得注意的是，默认属性值为baseline;这就解释了为什么他们表现得像他们一样。 UPDATED EXAMPLE HERE

.contentColumn60 {
    height: 40px;
    width: 58%;
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    display: inline-block;
    vertical-align: top;
}

.contentColumn20 {
    height: 40px;
    width: 20%;
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    display: inline-block;
    vertical-align: top;
}

Answer 2

使用overflow:hidden;作为内容列60,20,10，它完美无缺

Answer 3

添加clearfix或使用vertical-align：top和overflow：hidden

.contentColumn60:after {
  content: "";
  display: table;
  clear: both;
}

<div>顶部</div>上的未知额外空间

3 个答案: