html - 将文本的左边距从图像移开

Question

我在图片旁边有文字，但我在使用 margin-left 时遇到困难，因为它没有将文字推离图片 25 像素。

.standards img {
  float: left;
  margin-top: 50px;
  width: 400px;
  height: 350px;
  margin-left: 50px;
}

.standard-main p {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

<div class="standards">
  <img src="https://placekitten.com/100/100" alt="">
</div>
<div class="standard-main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</div>

Screenshot

如有任何帮助，我们将不胜感激，并提前致谢

Answer 1

嗯，float 和边距有着复杂的关系。

你可以做的是给 p 一个 margin-left 475px(图片的宽度和它的边距，加上 25px 所需的间隙)。但随后 p 中的文本将不再围绕图像流动。所以在这种情况下，最简单的解决方案是给 img 一个 25px 的右边距。

.standards img {
  float: left;
  margin-top: 50px;
  width: 400px;
  height: 350px;
  margin-left: 50px;
  margin-right:25px;
}

.standard-main p {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

<div class="standards">
  <img src="https://placehold.it/400x350" alt="">
</div>
<div class="standard-main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>