CSS中的边距是清除图像下方空间的正确方法吗？答案

【问题标题】：Is a margin in css a proper way to clear space under an image?CSS中的边距是清除图像下方空间的正确方法吗？
【发布时间】：2019-03-23 06:22:09
【问题描述】：

嘿@all 我在容器的左侧有一个图像，在右侧有一个文本。我的目标是让图像保持在左侧，而没有任何东西出现在其下方。这显然可以使用引导程序完成，但使用纯 CSS，img 下方的边距是否是将文本保持在右侧的正确方法？问题是必须将边距调整为段落的长度。有什么更好的方法来做到这一点？

HTML

  <div class="container test">
        <img src="https://images.pexels.com/photos/34950/pexels- 
             photo.jpg?cs=srgb&dl=abandoned-forest-hd-wallpaper-34950.jpg&fm=jpg"
             alt="">
        <h3>hola</h3>
        <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
    </div>

CSS

.test {
      width: 300px;

      img {
        width: 100px;
        height: 100px;
        float: left;
        margin-bottom: 10rem;
      }
    }

这是它的样子： Screenshot with margin

【问题讨论】：

标签： html css css-float margin

【解决方案1】：

将文本内容包装在它自己的 div 中并浮动那个。

.test {
  width: 300px;
}

img {
  max-width: 100px;
  float: left;
}

.wrap {
  float: left;
  width: 200px;
}

<div class="container test">
  <img src="http://www.fillmurray.com/460/300" alt="">
  <div class="wrap">
    <h3>hola</h3>
    <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
  </div>
</div>

【讨论】：

【解决方案2】：

我会在文本元素周围使用一个容器，并为.test 使用一个flexbox 每个弹性框项目的默认设置是stretch，这意味着它从上到下都有自己的空间，并且和一样高作为 flexbox 中最高的项目。

.test {
  width: 300px;
  display: flex;
}

img {
  width: 100px;
  height: 100px;
}

<div class="container test">
  <img src="https://via.placeholder.com/100x100" alt="">
  <!-- Container added for text elements -->
  <div class="text-container">
    <h3>hola</h3>
    <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
  </div>
</div>

【讨论】：