Fatal编程技术网
  • html/
  • Html 忽略父填充

Html 忽略父填充

html css

Html 忽略父填充,html,css,Html,Css,我试图让我的水平规则忽略父填充 以下是我所拥有的一个简单示例： #父级{ 填充：10px； 宽度：100px； } 人力资源{ 宽度：100px； } 您将发现水平规则超出父级10px。我试图让它忽略父div中其他所有内容都需要的填充 我知道我可以为其他的事情做一个单独的div；这不是我正在寻找的解决方案。简单修复，就这么做吧 margin:-10px 在人力资源方面。问题可能在于您使用的是哪种盒子型号。你在用IE吗 当IE处于怪癖模式时，width是盒子的外部宽度，这意味着填充物将在里面。

我试图让我的水平规则忽略父填充

以下是我所拥有的一个简单示例：

#父级{
填充：10px；
宽度：100px；
}
人力资源{
宽度：100px；
}
您将发现水平规则超出父级10px。我试图让它忽略父div中其他所有内容都需要的填充

我知道我可以为其他的事情做一个单独的div；这不是我正在寻找的解决方案。

简单修复，就这么做吧

margin:-10px
在人力资源方面。

问题可能在于您使用的是哪种盒子型号。你在用IE吗

当IE处于怪癖模式时，
width
是盒子的外部宽度，这意味着填充物将在里面。因此，框内左侧的总面积为
100px-2*10px=80px
，在这种情况下，您的100px宽
将不会向右看

如果您处于标准模式，
width
是框的内部宽度，而填充则添加到框的外部。因此，框的总宽度为
100px+2*10px=120px
，在框内为您的
留出正好100px的空间

要解决这个问题，可以调整IE的CSS值（检查Firefox，看看它在那里是否正常）。甚至更好的方法是，设置一个文档类型，使浏览器进入严格模式——IE也遵循标准框模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...


...

你的父母是120像素宽-即每边100像素宽+20个填充，所以你需要让你的线120像素宽。这是密码。下次注意，填充加起来等于元素宽度

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}
有点晚了，但这需要一点数学知识

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

.content{
边缘顶部：50px；
背景：#777；
填充：30px；
填充底部：0；
字体大小：11px；
边框：1个点#222；
}
.底部内容{
背景：#999；
宽度：100%；/*你需要这个才能工作*/
左边距：-30px；/*将接触最左边*/
右侧填充：60px；/*将接触非常右侧*/
}
段落

另一段

不再有内容

我希望这个div忽略填充。
我没有Windows，所以我没有在IE中测试

小提琴：

比

margin: -10px;
后者垂直地吸收内容。

这个问题大体上已经得到了回答，但每个人都回答了一小部分。我一分钟前刚刚处理过这个问题

我想在面板底部有一个按钮托盘，面板周围有30像素。按钮盘的底部和侧面必须齐平

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}
我用更多的肉体做了一个演示来推动这个想法。但是，上面的关键元素会在子元素上以匹配的负边距偏移任何父填充。然后，最关键的是，如果您希望以全宽度运行子级，请将“宽度”设置为“自动”。（如上面的评论所述）。

出于图像目的，您可以这样做

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}
容易解决。。添加到父div：

框大小：边框框

这里是另一种方法

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>


.padded元素{margin:0px；padding:10px；}
.padded元素img{左边距：-10px；宽度：计算（100%+10px+10px）；}
以下是repl.it上的一些示例：

如果您有一个带有垂直填充的父容器，并且您希望该容器中的某些内容（例如图像）忽略其垂直填充，则可以为“顶部”和“底部”设置一个负但相等的边距：

margin-top: -100px;
margin-bottom: -100px;
实际值似乎并不重要。还没有尝试过这种水平填充。

另一种解决方案：

position: absolute;
top: 0;
left: 0;
只需将顶部/右侧/底部/左侧更改为您的案例。

如果您希望hr直接从屏幕左侧转到右侧，则这是用于确保视图宽度不受影响的代码

hr {
position: absolute;
left: 0;
right: 0;
}
这是可行的，但问题是它不会扩展父div的整个长度。这是因为填充不包括在100px的宽度中，这意味着它实际上是120px的宽度，并且您的
将从您的div的末尾开始是20px。请看这个jsFiddle，了解我的意思：是的，我在添加它时就解决了这个问题；宽度不相关。如果需要100%的宽度，请使用“自动”作为宽度属性。宽度将根据给定的边距计算。您应该执行以下操作。。。边距：0-15px。。。。。否则，hr会垂直地将相邻内容吸向它。有点像黑客。希望有一个更好的方法，你应该把填充物分成右边：60px到左边：30px；右填充：30px，以便使用文本对齐：居中时内容不会偏移；定义宽度很容易。问题是当你不知道的时候width@GuilhermeFerreira使用
宽度：自动在
hr
中。不幸的是，这个解决方案仍然需要知道父级设置的填充。
但是如果你不一定知道父级的填充呢？当我使用最小宽度而不是仅使用宽度时，这对我很有效。@user5707327你总是可以将样式与javascript相结合来获得父级的填充。这太棒了！非常感谢。

hr {
position: absolute;
left: 0;
right: 0;
}