html - 使段落填充仅影响内部文本

Question

我有需求在htmls中有如下情况

   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
    <img src=http://cdn-img.health.com/sites/default/files/styles/400x400/public/styles/400x400/public/styles/main/public/how-take-care-cat-400x400.jpg?itok=ta2kPB58>
</p>

我需要以全宽显示图像，但应该为文本留一些边距。

我该如何设计这些场景？

提前致谢。

Answer 1

我不是很确定，你的意思是什么，但我想是这样的:

基本上你给一个padding到 <p>并使用 nagtive margin 将其删除对于 <img> .作为width是相对于父元素的内容框，我们必须更正 width的 <img>一点点。

img {
  width: calc( 100% + 6em );
  margin: auto -3em;
}
p{
  padding: 3em;
}

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
  <br>
  <img src=http://cdn-img.health.com/sites/default/files/styles/400x400/public/styles/400x400/public/styles/main/public/how-take-care-cat-400x400.jpg?itok=ta2kPB58>
</p>