CSS-忽略父填充（无负边距）

时间：2020-03-09 21:53:40

标签： css padding

我试图弄清楚如何忽略父元素设置的填充。

我在这里创建了一个示例代码以供使用：

body {
  background-color: #000;
}

.content {
  padding: 50px;
  margin: 0px;
  background-color: #FFF;
}

img {
  padding: unset;
}

.details {
  background-color: #ccc;
  width: 100%;
}
<div class="content">


  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus aliquam nisi, eget gravida dolor. Maecenas id pretium urna. Maecenas eu odio eu mauris tristique iaculis. Mauris posuere turpis arcu, et viverra erat laoreet sed. Nulla in faucibus
  lorem. Phasellus ultricies rhoncus urna, vitae sodales eros varius vitae. Fusce vitae diam elit. In imperdiet arcu in mauris tincidunt, in aliquam elit sollicitudin. Etiam malesuada, libero id dictum congue, urna ligula vestibulum turpis, pellentesque
  auctor dolor nulla semper enim. Sed non neque sit amet tortor blandit malesuada. Mauris dapibus congue volutpat. Mauris sit amet tortor vel tortor lacinia lobortis. Morbi scelerisque mauris ac condimentum aliquam. Pellentesque habitant morbi tristique
  senectus et netus et malesuada fames ac turpis egestas. Curabitur commodo urna at nisi malesuada malesuada. Vestibulum eu neque nec orci porta pharetra eu nec enim. Phasellus a cursus lacus, at tristique magna. Vivamus venenatis est non magna pretium
  ornare. Pellentesque molestie malesuada finibus. Nam pretium elementum est, scelerisque dignissim sapien bibendum non. Nunc id ex at elit consequat convallis a eget tellus. Fusce quis auctor arcu. Phasellus id mauris tincidunt, vulputate neque nec,
  aliquam erat. Maecenas feugiat porta porttitor. Donec ut ex tempor nisi feugiat rutrum. Praesent auctor, justo sit amet facilisis pretium, sem mi accumsan ante, tristique pretium arcu felis id risus. Vestibulum ac orci justo.

  <table class="details">
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
  Ut mollis justo non condimentum venenatis. Pellentesque et mi vel lectus consequat laoreet in eu risus. Cras elementum fermentum pretium. Nullam laoreet sed neque ut mattis. Pellentesque condimentum mi vel sapien mattis, ac porta libero gravida. Maecenas
  non erat at ligula ultrices bibendum. Quisque neque est, commodo eget orci nec, congue pretium lorem.

  <img class="test" src="https://images.laurentwillen.be/sites/21/2020/02/huawei-gt-active-top-scaled.jpg" width="100%"> Aenean ultrices posuere rutrum. Vivamus scelerisque leo a velit faucibus, sed congue massa condimentum. Nam bibendum leo in arcu aliquet
  laoreet. Duis vulputate quam vel euismod volutpat. Sed commodo, nibh at aliquet porttitor, leo ante varius massa, in ultrices enim turpis et metus. Morbi fermentum neque est, at consectetur purus elementum ut. Aliquam dictum pretium tristique. Suspendisse
  ullamcorper interdum libero sed tempor. Praesent vulputate sapien venenatis dui feugiat aliquet. Sed consectetur mi sit amet arcu iaculis dapibus. Vestibulum ac est eu urna laoreet fermentum et eget quam.
</div>

我想要实现的是对除图像和表格以外的所有内容进行填充。图片和表格应占据所有可用空间，并且应触摸左右边框。这就是为什么我不能使用负边距的原因，因为它只会将图像或表格向左移动。

我也尝试过负边距，并用calc（100％+ xxpx）扩展图像宽度，但这是行不通的。

您是否知道我该怎么做？

谢谢

2 个答案:

答案 0 :(得分：2)

如果正确设置宽度，

负边距效果很好：

.content {
  padding: 50px;
  margin: 0px;
  background-color: #FFF;
  border: 1px solid;
}

table {
  margin: 0 -50px;
  width:calc(100% + 100px);
  outline: 1px solid red;
  background-color: #ccc;
}

img {
  margin: 0 -50px;
  display: block;
  width:auto;
  max-width:calc(100% + 100px);
  outline: 1px solid red;
}
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus aliquam nisi, eget gravida dolor. Maecenas id pretium urna. Maecenas eu odio eu mauris tristique iaculis. Mauris posuere turpis arcu, et viverra erat laoreet sed. Nulla in faucibus
  lorem. Phasellus ultricies rhoncus urna, vitae sodales eros varius vitae. Fusce vitae diam elit. In imperdiet arcu in mauris tincidunt, in aliquam elit sollicitudin. Etiam malesuada, libero id dictum congue, urna ligula vestibulum turpis, pellentesque
  auctor dolor nulla semper enim. Sed non neque sit amet tortor blandit malesuada. Mauris dapibus congue volutpat. Mauris sit amet tortor vel tortor lacinia lobortis. Morbi scelerisque mauris ac condimentum aliquam. Pellentesque habitant morbi tristique
  senectus et netus et malesuada fames ac turpis egestas. Curabitur commodo urna at nisi malesuada malesuada. Vestibulum eu neque nec orci porta pharetra eu nec enim. Phasellus a cursus lacus, at tristique magna. Vivamus venenatis est non magna pretium
  ornare. Pellentesque molestie malesuada finibus. Nam pretium elementum est, scelerisque dignissim sapien bibendum non. Nunc id ex at elit consequat convallis a eget tellus. Fusce quis auctor arcu. Phasellus id mauris tincidunt, vulputate neque nec,
  aliquam erat. Maecenas feugiat porta porttitor. Donec ut ex tempor nisi feugiat rutrum. Praesent auctor, justo sit amet facilisis pretium, sem mi accumsan ante, tristique pretium arcu felis id risus. Vestibulum ac orci justo.

  <table class="details">
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
  Ut mollis justo non condimentum venenatis. Pellentesque et mi vel lectus consequat laoreet in eu risus. Cras elementum fermentum pretium. Nullam laoreet sed neque ut mattis. Pellentesque condimentum mi vel sapien mattis, ac porta libero gravida. Maecenas
  non erat at ligula ultrices bibendum. Quisque neque est, commodo eget orci nec, congue pretium lorem.
  <img class="test" src="https://images.laurentwillen.be/sites/21/2020/02/huawei-gt-active-top-scaled.jpg" width="100%">
  Ut mollis justo non condimentum venenatis. Pellentesque et mi vel lectus consequat laoreet in eu risus. Cras elementum fermentum pretium. Nullam laoreet sed neque ut mattis. Pellentesque condimentum mi vel sapien mattis, ac porta libero gravida. Maecenas
  non erat at ligula ultrices bibendum. Quisque neque est, commodo eget orci nec, congue pretium lorem.

</div>

答案 1 :(得分：-1)

问题是您将图像嵌入到div中，没有一些棘手的CSS，您将无法获得所需的内容

<div class="content">
   ...
</div>
<img class="test" src="https://images.laurentwillen.be/sites/21/2020/02/huawei-gt-active-top-scaled.jpg" width="100%"> 
<div class="content">
   text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
相关问题
最新问题