Question

我的网络存在一个基本问题，这让我疯狂。

想象一下，我有一个容器div，我设置为max-width 1024 px。然后我在其中还有两个div，每个都是width:50%。我尝试向内部div添加padding，但随后它溢出容器div的1024 max-width像素。

我怀疑的是，如果padding就像内边距一样，它们是元素的一部分，不应该算在50％width内吗？换句话说，我希望元素+ padding 为50％，而不仅仅是元素。

只是为了让事情更清楚，

现在的样子：

......这就是它的外观。：

那么，我该怎么办？

Answer 1

盒子模型是这样的：

Total width = width + padding + border

如果你有1000px的宽度+ 10px的填充，它将是总宽度的1020px。

为避免这种情况，您可以使用此属性：

 box-sizing: border-box;

更多信息：

https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

Answer 2

您需要将box-sizing: border-box设置为内部div，以便给出的宽度包括您的填充。

如果您打算使用保证金，则不会这样做。

为此，您可以使用calc()，因此如果您的内部div将具有5px的保证金，则看起来像这样

width: calc(50% - 10px);

你可以把它们结合起来......

＆＃13;

.outer {
  width: 500px;
  background: red;
  padding: 20px 0;
  overflow: hidden;
}

.inner {
  width: calc(50% - 10px);
  height: 100px;
  margin: 5px;
  padding: 10px;
  box-sizing: border-box;
  background: blue;
  float: left;
}

＆＃13;

<div class="outer">

  <div class="inner">
  </div>

    <div class="inner">
  </div>

</div>

＆＃13;

Answer 3

您可以使用类似::

之类的手动宽度

<div style="width:1024px">
    <div style="width:502px;padding:5px"></div>
    <div style="width:502px;padding:5px"></div>
</div>

Answer 4

是的，衬垫就像内边距，它们是元素实际尺寸的一部分你应该计算

总元素宽度=宽度+左边距+右边距+左边框+右边框+左边距+右边距 e.g。

上面的两个<div>元素在结果中以不同的大小结束（因为div2指定了填充）。

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}

<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

对于您的问题，您必须使用box-sizing: border-box; CSS3 box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。

如果在元素填充上设置box-sizing: border-box;，则宽度和高度中包含边框：

见下面的例子

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>

在父宽度内获取填充和边距

4 个答案: