html中两个按钮水平,html – 两个按钮之间的奇怪差距

问题是在内联块元素中,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;

}

Button1

Button2

>另一个是使用负边距 – 左：-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;

}

Button1

Button2

>最后但我完全不喜欢使用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;

}

Button1Button2

以上都可行.祝好运 ：)