参见英文答案 >
How do I remove the space between inline-block elements?35个
我正在使用HTML按钮标记遇到奇怪的行为.似乎当我并排放置两个按钮时,它们之间的间隙为4px,无处不在.
我正在使用HTML按钮标记遇到奇怪的行为.似乎当我并排放置两个按钮时,它们之间的间隙为4px,无处不在.
从下图中可以看出,FireBug显示间隙既不是边距也不是填充(因为填充将以紫色显示).
请注意：我在Windows 8.1上使用的是最新版本的Firefox,我也试过了Eric Mayer的CSS重置版,但差距仍然存在.
这不是一个非常重要的问题,但知道它是否正常以及它是什么原因会很好.
解决方法
问题是在内联块元素中,HTML中的空格成为屏幕上的可视空间.解决它的一些解决方案：
>使用font-size：0到父容器(您必须为子元素定义font-size)：
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
font-size: 0;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons"> <button>Button1</button> <button>Button2</button> </div>
>另一个是使用负边距 – 左：-4px
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
margin-left: -4px;
}
<div class="buttons"> <button>Button1</button> <button>Button2</button> </div>
>最后但我完全不喜欢使用html注释作为间隔符
差距之间：
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons"> <button>Button1</button><!-- --><button>Button2</button> </div>
以上都可行.祝好运 ：)
