如何在包装在 div 中的 < a > 标签之间留出空格答案

【问题标题】：How to give spaces between < a > tags which are wrapped in a div如何在包装在 div 中的 < a > 标签之间留出空格
【发布时间】：2019-04-10 07:59:12
【问题描述】：

如何在 <a> 包裹在 div 中的标签之间留出空格？

<div class="sideMenu"> 
  <a href="#" > A </a>
  <a href="#" > B </a>
  <a href="#" > C </a>
</div>

css:

.sideMenu{
  padding: 50px;
}

【问题讨论】：

什么样的特殊间距？你的意思是垂直的还是水平的还是别的什么？
水平间距
请同时显示any attempts you've made和any research。
而不是填充，边距会很好。对于空间可见性，两者都有效，但如果标签具有背景颜色，则每个标签的背景环绕之间不会有空格。
How to space the children of a div with css?的可能重复

标签： css

【解决方案1】：

添加了.sideMenu a css，可能对您有所帮助。

.sideMenu {
  padding: 50px;
}

.sideMenu a{
    line-height: 1em;
    display: inline-block;
    text-decoration: none;
    padding: 12px;
    margin: 10px;
  }

<div class="sideMenu"> 
  <a href="#" > A </a>
  <a href="#" > B </a>
  <a href="#" > C </a>
</div>

【讨论】：

【解决方案2】：

您也可以使用不间断的空格字符（取决于您需要什么，即空格与一些空格）：

<div class="sideMenu"> <a href="#" > A </a> </div>

【讨论】：

【解决方案3】：

选择器.sideMenu 为div 提供填充，而不是其中的a 元素。要选择a 元素，可以使用后代选择器.sideMenu a 或子选择器.sideMenu > a。

例如：

.sideMenu a {
  background: cyan;
  border: 1px solid;
  padding: 20px;
}

Fiddle

【讨论】：

@Deke 你能扩展一下吗？ Here's another fiddle 使用这种技术。也许填充被另一个规则覆盖了。

【解决方案4】：

我会建议一个 CSS 规则：

.sideMenu a {
   margin-right: 10px;
}
.sideMenu a:last-of-type {
   margin-right: 0;
}

【讨论】：

【解决方案5】：

您可以为 div 中的所有标签应用 margin-right 属性。

.sideMenu a {
  margin-left: 5%; 
/* use %, em, px. % and em are recommended. */
}

【讨论】：