如何在div内的项目之间设置空间答案

【问题标题】：how to set space between items inside a div如何在div内的项目之间设置空间
【发布时间】：2022-01-18 09:02:12
【问题描述】：

我在一个 div 中包含三个元素，一个图像一个 h4 和一个链接我希望图像和 h4 彼此靠近，并且链接和 h4 之间有一些空间我试过了，但它给了我所有项目之间相同的空间

.location {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 0;
  }

【问题讨论】：

发布您的 HTML。
你为什么不简单地使用边距来创造差距。

标签： html css flexbox

【解决方案1】：

您可以将 flex 与 column-gap 属性一起使用， justify-content: space-between 将在元素之间提供均匀的空间。

.location {
  display: flex;
  column-gap: 20px;
  justify-content: space-between;
}

或者

你可以使用边距

.location{
 margin: 20px;
}

【讨论】：

【解决方案2】：

您可以将图像和 h4 包装在一个 div 中并单独保留链接，因此 .location flex div 中只有 2 个元素，然后将对齐内容设置为周围的空格或之间的空格，您也可以省略对齐内容并在链接中添加一个 margin-left 来指定你需要的空间。

<div class='location'>
 <div>
  <img />
  <h4></h4>
 </div>
<a href=#></a>

【讨论】：

【解决方案3】：

尝试在你需要的属于你的类的对象之间使用边距.(your class) (html object) {...} 例如：

    .location img {
        margin: 10px;
    }

【讨论】：

【解决方案4】：

.outer .same{display:inline-block}
.outer .same:nth-child(2){margin-right: 50px;}

<div class="outer">
  <img class="same" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpPVyc4LETd6GWTNZWJCuiBWoEI3w5yHZeoA&usqp=CAU">
  <h4 class="same">heading</h4>
  <a class="same" href="#">link</a>
</div>

【讨论】：