blocks|key|820605|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820606|+**|blockquote|820607|820608|有很多方法可以解决这个问题。请看下面我的一些观察结果。-您可以在两个材质按钮之间添加空格(不间断)。|820609|820610|/button>|820611|second+|unordered-list-item|820612|<+|820613|+type="+button+">Button+1<+/button>+type=；；<+button+2<“button”>button+right方式是您可以将样式-right:10px添加到button+1。不要将padding作为您正在给出的padding指令(padding用于内部间距到边框。)您必须给出右边距间距，即超出边界的间距。|820614|820615|820616|**|820617|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|W|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|X|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|Y|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|Z|7|@]|8|@]|9|$]]|$1|G|3|-4|4|5|6|10|7|@]|8|@]|9|$]]|$1|H|3|I|4|5|6|11|7|@]|8|@]|9|$]]|$1|J|3|K|4|L|6|12|7|@]|8|@]|9|$]]|$1|M|3|N|4|L|6|13|7|@]|8|@]|9|$]]|$1|O|3|P|4|L|6|14|7|@]|8|@]|9|$]]|$1|Q|3|-4|4|5|6|15|7|@]|8|@]|9|$]]|$1|R|3|-4|4|5|6|16|7|@]|8|@]|9|$]]|$1|S|3|T|4|5|6|17|7|@]|8|@]|9|$]]|$1|U|3|-4|4|5|6|18|7|@]|8|@]|9|$]]]|V|$]]

<blockquote>
  <p>**</p>
  
  <p>There are many ways to solve this. please see below some of my
  observations.
   - you can add &amp;nbsp ; (non-breaking space) in between both the material buttons.</p>
  
  <ul>
  <li><p>&lt; button type="button">Button 1&lt; /button> &amp;nbsp ; &amp;nbsp ; &lt; button type="button">Button 2&lt; /button></p></li>
  <li><p>second way is you can add the style margin-right:10px to button 1. don't give padding as your given instruction you are giving the
  padding (padding is for inside spacing to border.) you have to give the
  margin-right spacing which is spacing beyond the borders.</p></li>
  </ul>
  
  <p>**</p>
</blockquote>


blocks|key|1185581|text|作为@nitin9nair注释，在style属性或CSS类定义中，您需要的是margin属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1185582|<button+style="margin-right:20px">Button+1</button>+<button>Button+2</button>|code-block|syntax|javascript|1185583|如果使用flex-layout，也可以使用fxLayoutGap指令。|1185584|<div+fxLayout="row+wrap"+fxLayout.xs="column"+fxLayoutGap="10px+grid"><button>Button+1</button>+<button>Button+2</button>|1185585|更多信息:+https://github.com/angular/flex-layout/wiki/fxLayoutGap-API|1185586|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>As @nitin9nair comment, what you need is the margin property, in a style attribute or in a CSS class definition:</p>
<pre><code>&lt;button style=&quot;margin-right:20px&quot;&gt;Button 1&lt;/button&gt; &lt;button&gt;Button 2&lt;/button&gt;
</code></pre>
<p>If you use flex-layout, you can use the fxLayoutGap directive too.</p>
<pre><code>&lt;div fxLayout=&quot;row wrap&quot; fxLayout.xs=&quot;column&quot; fxLayoutGap=&quot;10px grid&quot;&gt;&lt;button&gt;Button 1&lt;/button&gt; &lt;button&gt;Button 2&lt;/button&gt;
</code></pre>

More info: [https://github.com/angular/flex-layout/wiki/fxLayoutGap-API][1]


blocks|key|1122239|text|您还可以编写一个css选择器，它为同级添加边距。因此，这将不适用于第一个按钮，但适用于所有后续按钮。在这种情况下是垫起的按钮。只需调整css选择器来选择需要间距的元素即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1122240|.mat-raised-button+~+.mat-raised-button+{
++margin-left:+10px;
}|code-block|syntax|javascript|1122241|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 could also write a css selector, which adds margin to siblings. So this will not apply to the first button, but all following buttons. In this case the mat-raised-button. Just adjust the css selector for the elements where you want to have spacing.</p>
<pre><code>.mat-raised-button ~ .mat-raised-button {
  margin-left: 10px;
}
</code></pre>


<p>I have two material buttons in my angular application right next to each other.  I want to add a little bit of padding between them.  But when I add add <code>padding-right</code> to the left button, I end up going from this:</p>

<pre><code>|  button  ||  button  |
</code></pre>

<p>To this:</p>

<pre><code>|  button         ||  button  |
</code></pre>

<p>But what I want is this:</p>

<pre><code>|  button  |       |  button  |
</code></pre>


Spacing between Material Buttons

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

在我的angular应用程序中，我有两个相邻的材质按钮。我想在它们之间添加一点填充。但当我将add padding-right添加到左侧按钮时，我的结果是：|  button  ||  button  |要这样做：|  button         ||  button  |但我想要的是：|  button  |   ...

问材质按钮之间的间距
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材质按钮之间的间距EN