CSS 带有“边距：0”的元素（按钮）之间还有空间吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8824395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Still space between elements (buttons) with "margin: 0"?
提问by NullVoxPopuli
A picture:
照片：
So, right now, there is a little gam in between the two buttons. and I'd like the buttons to share the middle edge, or at least be touching (if they are touching, changing the CSS so it looks like they are sharing an edge isn't hard)
所以，现在，两个按钮之间有一个小游戏。并且我希望按钮共享中间边缘，或者至少是触摸的（如果它们正在触摸，则更改 CSS 使它们看起来共享一个边缘并不难）
But Margin left / right doesn't appear to do anything. What's going on here?
但 Margin left / right 似乎没有做任何事情。这里发生了什么？
回答by leopic
The two buttons have a space between them because of the return and the indentation you used to format your HTML.
由于用于格式化 HTML 的返回和缩进，这两个按钮之间有一个空格。
Just float both containers: http://jsfiddle.net/TRVfh/19/
只需浮动两个容器：http: //jsfiddle.net/TRVfh/19/
.redline_changes, .redline_comments{
margin-left: 0px;
margin-right: 0px; float: left;
}
回答by joatis
The space is caused by the newline and indentation between the two internal divs. Removing the white space will bring the two closer.
空格是由两个内部 div 之间的换行符和缩进引起的。去除空白将使两者更接近。
<div class="shell" style="width: 950px; ">
<div class="redline_changes">
<a href="#">Left Button</a>
</div><div class="redline_comments">
<a href="#">Right Button</a>
</div>
</div>
回答by Thinker
Just remove any spaces between DIVs:
只需删除 DIV 之间的任何空格：
<div class="redline_changes">
<a href="#">Left Button</a>
</div><div class="redline_comments">
<a href="#">Right Button</a>
</div>
回答by j08691
Looks like extra whitespace in the HTML. http://jsfiddle.net/TRVfh/18/
看起来像 HTML 中的额外空白。http://jsfiddle.net/TRVfh/18/
回答by Konerak
Try adding display:inline(instead of the current display:inline-block;)
尝试添加display:inline（而不是当前display:inline-block;）
Tested in Chrome, Firefox, Opera and IE.
在 Chrome、Firefox、Opera 和 IE 中测试。
回答by shivam
use display:flex;flexstands for flexible layout.
usedisplay:flex;flex代表灵活的布局。
回答by Salma
you can use a spacer with all 0
您可以使用全为 0 的间隔
.example-spacer {
flex: 0 0 0;
}
or
.example-spacer {
flex: 0 0 auto;
}
or
.example-spacer {
flex: auto;
}
回答by u9151543
try this to all buttons:
对所有按钮试试这个：
margin-left: 0px;
margin-right: 0px;
display:flex;
float: left;
回答by blake305
I fixed thisby adding margin-left: -5pxto the second button.
回答by Ry-
It's the single space character that's inserted automatically by normalization. Unfortunately, to fix it, you'll need to ruin your code formatting:
它是通过规范化自动插入的单个空格字符。不幸的是，要修复它，您需要破坏代码格式：
</div><div class="redline_comments">
<a href="#">Right Button</a>
</div>
