内联块元素后的意外边距
Unexpected margin after inline-block element
我有以下代码:http://jsfiddle.net/yxxhj33x/
如您所见,我有 .links
元素,后跟 input[type='text']
元素。不幸的是,输入上方有一个边距,当我添加时它不会消失:
.links {
display: inline-block;
border: 1px solid black;
width: 100%;
font-size: 0;
white-space: nowrap;
overflow-x: auto;
}
.links a {
background: #FFF;
display: inline-block;
min-width: 100px;
width: 25%;
text-align: center;
border-right: 1px black solid;
height: 50px;
font-size: 16px;
}
<div class='links'>
<a href='#'>Blah</a>
<a href='#'>Blah</a>
<a href='#'>Blah</a>
<a href='#'>Blah</a>
</div>
<input type='text'>
input[type='text'] {
margin: 0;
}
我该如何解决这个问题?
除了 removing the space between inline elements, you need to change the value of the vertical-align
property on the .links
element. It's worth pointing out that the default value is baseline
. When it is set to baseline
on an inline element, there is a reserved space for letters such as f, j, p and q(这些字母比其他字母挂得更低(或更高),因此保留 space)。
.links {
display: inline-block;
border: 1px solid black;
width: 100%;
font-size: 0;
white-space: nowrap;
overflow-x: auto;
vertical-align: bottom; /* Added.. */
}
.links a {
box-sizing: border-box; /* Added.. */
}
还值得指出的是,a
元素的宽度加起来不等于 100%
(因为边框不包括在元素的宽度计算中)。为了删除 scollbar,将 box-sizing: border-box
添加到锚元素。
附带说明一下,由于您在父 .links
元素上设置了 100%
的宽度,因此它实际上不需要 display
的 inline-block
。您应该将其设为 block
级别元素(通过省略 display: inline-block
,因为默认情况下它已经是 div
和 block
级别)。这样做时,您实际上不再需要添加 vertical-align: bottom
,因为 block
级别元素不遵守此 属性.
.links {
border: 1px solid black;
font-size: 0;
white-space: nowrap;
overflow-x: auto;
}
.links a {
box-sizing: border-box;
}
我有以下代码:http://jsfiddle.net/yxxhj33x/
如您所见,我有 .links
元素,后跟 input[type='text']
元素。不幸的是,输入上方有一个边距,当我添加时它不会消失:
.links {
display: inline-block;
border: 1px solid black;
width: 100%;
font-size: 0;
white-space: nowrap;
overflow-x: auto;
}
.links a {
background: #FFF;
display: inline-block;
min-width: 100px;
width: 25%;
text-align: center;
border-right: 1px black solid;
height: 50px;
font-size: 16px;
}
<div class='links'>
<a href='#'>Blah</a>
<a href='#'>Blah</a>
<a href='#'>Blah</a>
<a href='#'>Blah</a>
</div>
<input type='text'>
input[type='text'] {
margin: 0;
}
我该如何解决这个问题?
除了 removing the space between inline elements, you need to change the value of the vertical-align
property on the .links
element. It's worth pointing out that the default value is baseline
. When it is set to baseline
on an inline element, there is a reserved space for letters such as f, j, p and q(这些字母比其他字母挂得更低(或更高),因此保留 space)。
.links {
display: inline-block;
border: 1px solid black;
width: 100%;
font-size: 0;
white-space: nowrap;
overflow-x: auto;
vertical-align: bottom; /* Added.. */
}
.links a {
box-sizing: border-box; /* Added.. */
}
还值得指出的是,a
元素的宽度加起来不等于 100%
(因为边框不包括在元素的宽度计算中)。为了删除 scollbar,将 box-sizing: border-box
添加到锚元素。
附带说明一下,由于您在父 .links
元素上设置了 100%
的宽度,因此它实际上不需要 display
的 inline-block
。您应该将其设为 block
级别元素(通过省略 display: inline-block
,因为默认情况下它已经是 div
和 block
级别)。这样做时,您实际上不再需要添加 vertical-align: bottom
,因为 block
级别元素不遵守此 属性.
.links {
border: 1px solid black;
font-size: 0;
white-space: nowrap;
overflow-x: auto;
}
.links a {
box-sizing: border-box;
}