html – 顶部未知的额外空间

概述我正在创建一个有几个div的表madde,并且我在第一行(样式为head)和其余部分之间有一个额外的空间,只有第二列(div).在这里你可以看到很清楚： 没有样式属性导致这个空间,至少我无法找到它的原因. 我在jsfiddle上重现了它,你可以看到它还设置了额外的空间：DEMO 在这里我带来HTML& Syle相关代码： HTML： <div class="tableWrap"><div cla 我正在创建一个有几个div的表madde,并且我在第一行(样式为head)和其余部分之间有一个额外的空间,只有第二列(div).在这里你可以看到很清楚：

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

我在Jsfiddle上重现了它,你可以看到它还设置了额外的空间：DEMO

在这里我带来HTML& Syle相关代码：

HTML：

<div ><div >    <div >        <span >Turno</span>    </div>    <div >        <span >Tipo</span>    </div>    <div >        <span >Editar</span>    </div>    <div >        <span >Reactivar</span>    </div></div><div >    <div >        <span >Mañana(17:00 - 21:00)</span>    </div>    <div >        <span >Mañanas</span>    </div>    <div >        <a href="#"><div ></div></a>    </div>    <div >        <a href="#"><div ></div></a>    </div></div>    <div >    <div >        <span >Mañana(17:00 - 21:00)</span>    </div>    <div >        <span >Mañanas</span>    </div>    <div >        <a href="#"><div ></div></a>    </div>    <div >        <a href="#"><div ></div></a>    </div></div>    <div >    <div >        <span >Mañana(17:00 - 21:00)</span>    </div>    <div >        <span >Mañanas</span>    </div>    <div >        <a href="#"><div ></div></a>    </div>    <div >        <a href="#"><div ></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);    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;}

解决方法 由于元素是内联块,因此可以使用vertical-align：top根据需要对齐它们.值得注意的是,默认属性值是基线;这就解释了为什么他们表现得像他们一样. 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;}

总结

以上是内存溢出为你收集整理的html – 顶部未知的额外空间全部内容，希望文章能够帮你解决html – 顶部未知的额外空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。