Question

如何使用html和css在2张图像之间添加空格？这个问题在另一个stackoverflow线程中得到了回答，但是由于我听不懂，所以无法将其应用于我的解决方案。

主要问题可能在css中，因为我知道边距是外层空间，而填充是内部空间，所以我认为使用那些我可能能够使用边距和边距来创建空间，但是我不是我认为正确使用它们。

这就是我所拥有的：

HTML

<p> This paragraph is just where I put lots of unnecessary info about a tree and a house. </p>

<div id = "images"> 

<img src = "tree.png" alt = "Tree picture" width = "100" height = "100">
<img src = "house.png" alt = "House picture" width = "100" height = "100">

</div>

CSS

#images {
    margin:50px;
    padding:50px;
}

Answer 1

您需要定位实际的图像本身，以在其周围而不是在其外部的div上放置间距。

#images img {
    margin: 25px;
}

<p>This paragraph is just where I put lots of unnecessary info about a tree and a house.</p>

<div id="images">
  <img src="tree.png" alt="Tree picture" width="100" height="100">
  <img src="house.png" alt="House picture" width="100" height="100">
</div>

Answer 2

可以通过这种方式完成。虽然，最好提供一个标识符，例如ID，然后将css设置为id。

img
{
    padding:25px;
}

<p> This paragraph is just where I put lots of unnecessary info about a tree and a house. </p>

<div id = "images"> 

<img src = "tree.png" alt = "Tree picture" width = "100" height = "100" >
<img src = "house.png" alt = "House picture" width = "100" height = "100">

</div>

Answer 3

您只需要将其添加到CSS中，您的代码就无法正常工作，因为您是将CSS应用于div而不是单个元素。一种有效的方法是将一个类（例如，class =“ ex-image”）添加到img元素，然后使用该选择器应用更改。

img{
  margin: 25px;
}

如何在两个图像之间的空格下添加空格？

3 个答案: