blocks|key|4182998|text|通过将margin-left:+-5px添加到第二个按钮来执行I+fixed+this。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4182999|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TRVfh/13/^0|3|H|V|C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p><a href="http://jsfiddle.net/TRVfh/13/" rel="nofollow">I fixed this</a> by adding <code>margin-left: -5px</code> to the second button.</p>


blocks|key|1323954|text|只需删除DIVs之间的所有空格：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1323955|++++<div+class="redline_changes">
++++++++<a+href="#">Left+Button</a>
++++</div><div+class="redline_comments">
++++++++<a+href="#">Right+Button</a>
++++</div>|code-block|syntax|javascript|1323956|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just remove any spaces between DIVs:</p>

<pre><code>    &lt;div class="redline_changes"&gt;
        &lt;a href="#"&gt;Left Button&lt;/a&gt;
    &lt;/div&gt;&lt;div class="redline_comments"&gt;
        &lt;a href="#"&gt;Right Button&lt;/a&gt;
    &lt;/div&gt;
</code></pre>


blocks|key|304157|text|在HTML中看起来像是额外的空格。http://jsfiddle.net/TRVfh/18/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|304158|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TRVfh/18/^0|H|T|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Looks like extra whitespace in the HTML. <a href="http://jsfiddle.net/TRVfh/18/" rel="nofollow">http://jsfiddle.net/TRVfh/18/</a></p>


blocks|key|141606|text|空格是由两个内部div之间的换行符和缩进造成的。去掉空格会拉近两者的距离。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|141607|<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>|code-block|syntax|javascript|141608|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The space is caused by the newline and indentation between the two internal divs. Removing the white space will bring the two closer.</p>

<pre><code>&lt;div class="shell" style="width: 950px; "&gt;
        &lt;div class="redline_changes"&gt;
            &lt;a href="#"&gt;Left Button&lt;/a&gt;
        &lt;/div&gt;&lt;div class="redline_comments"&gt;
            &lt;a href="#"&gt;Right Button&lt;/a&gt;
        &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|141649|text|由于用于设置HTML格式的回车和缩进，这两个按钮之间有一个空格。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|141650|只需浮动两个容器：http://jsfiddle.net/TRVfh/19/|offset|length|141651|.redline_changes,+.redline_comments{
++++margin-left:+0px;
++++margin-right:+0px;+float:+left;
}|code-block|syntax|javascript|141652|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TRVfh/19/^0|0|9|T|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>The two buttons have a space between them because of the return and the indentation you used to format your HTML.</p>

<p>Just float both containers: <a href="http://jsfiddle.net/TRVfh/19/" rel="noreferrer">http://jsfiddle.net/TRVfh/19/</a></p>

<pre><code>.redline_changes, .redline_comments{
    margin-left: 0px;
    margin-right: 0px; float: left;
}
</code></pre>


blocks|key|141665|text|它是通过规范化自动插入的单个空格字符。不幸的是，要修复它，你需要破坏你的代码格式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|141666|</div><div+class="redline_comments">
++++++++++++<a+href="#">Right+Button</a>
++++++++</div>|code-block|syntax|javascript|141667|Here's+a+demo.|offset|length|141668|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TRVfh/20/^0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>It's the single space character that's inserted automatically by normalization. Unfortunately, to fix it, you'll need to ruin your code formatting:</p>

<pre><code>&lt;/div&gt;&lt;div class="redline_comments"&gt;
            &lt;a href="#"&gt;Right Button&lt;/a&gt;
        &lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/TRVfh/20/" rel="nofollow">Here's a demo.</a></p>


blocks|key|1324032|text|尝试添加display:inline+(而不是当前的display:inline-block;)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1324033|http://jsfiddle.net/D269S/|1324034|已在Chrome、Firefox、Opera和IE中测试。|1324035|entityMap|0|LINK|mutability|MUTABLE|url^0|4|E|Q|L|0|0|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]]]

<p>Try adding <code>display:inline</code> (instead of the current <code>display:inline-block;</code>)</p>

<p><a href="http://jsfiddle.net/D269S/" rel="nofollow">http://jsfiddle.net/D269S/</a></p>

<p>Tested in Chrome, Firefox, Opera and IE.</p>


blocks|key|4183213|text|使用display:flex;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4183214|flex代表灵活布局。|4183215|entityMap^0|2|D|0|0|4|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>use <code>display:flex;</code><br>
<code>flex</code> stands for flexible layout.</p>


blocks|key|141734|text|可以使用全为0的间隔符|type|unstyled|depth|inlineStyleRanges|entityRanges|data|141735|.example-spacer+{
++flex:+0+0+0;
}
or
.example-spacer+{
++flex:+0+0+auto;
}
or
.example-spacer+{
++flex:+auto;
}|code-block|syntax|javascript|141736|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can use a spacer with all 0</p>

<pre><code>.example-spacer {
  flex: 0 0 0;
}
or
.example-spacer {
  flex: 0 0 auto;
}
or
.example-spacer {
  flex: auto;
}
</code></pre>


blocks|key|4183258|text|尝试对所有按钮执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4183259|margin-left:+0px;
margin-right:+0px;
display:flex;
float:+left;|code-block|syntax|javascript|4183260|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this to all buttons:</p>

<pre class="lang-css prettyprint-override"><code>margin-left: 0px;
margin-right: 0px;
display:flex;
float: left;
</code></pre>


<p><a href="http://jsfiddle.net/TRVfh/2/" rel="noreferrer">http://jsfiddle.net/TRVfh/2/</a></p>

<p>A picture:<br>
<img src="https://i.stack.imgur.com/aIXqg.png" alt="enter image description here"></p>

<p>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)</p>

<p>But Margin left / right doesn't appear to do anything.
What's going on here?</p>


Still space between elements (buttons) with "margin: 0"?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

一张图片：​所以，现在，在两个按钮之间有一个小游戏。我希望按钮共享中间边缘，或者至少是接触的(如果它们是接触的，那么更改CSS以使其看起来像共享一个边缘并不难)但是左边距/右边距似乎没有任何作用。这里发生了什么事？

问元素(按钮)之间是否仍有“边距: 0”的空格？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元素(按钮)之间是否仍有“边距: 0”的空格？EN