如何使内部 div 宽度恰好比外部 div 宽度少 4 像素？答案

【问题标题】：How to make inner div width exactly 4 pixel less the outter div width?如何使内部 div 宽度恰好比外部 div 宽度少 4 像素？
【发布时间】：2011-05-26 12:52:07
【问题描述】：

代码是这样的。我有一个外部 div，假设它是 200px 宽。即使您调整外部 div 的大小，我也希望内部 div 比外部 div 小 4 个像素。我更关心高度而不是宽度。

我基本上使用外部和内部宽度的边框，所以如果我的内部 div 与外部宽度相同，则内部 div 从外部 div 出来（向右移动 1px）。

我基本上是在寻找类似的东西：

child.width = parent.width - 4px;

【问题讨论】：

标签： css html

【解决方案1】：

你能不能简单地给内部 div 2px 的边距...？

修改

比现实中的要复杂一些，但这似乎是 wrk（从 Ash 的小提琴中分叉出来的）......

http://jsfiddle.net/biznuge/FGQRm/11/

【讨论】：

是的，让高度和宽度相对于外部 div 为 100%。
请在下面查看我的评论。这是一个好主意，但不适用于高度（适用于宽度）。另外，我希望附加两个边框，因此对外部 div 应用填充对我来说更可取。
感谢它确实有效。在实际的浏览器中，我必须像这样添加填充： inner-div.padding : 0 4px 4px 0;在 jsfiddle 中，您的代码运行良好。不知道实际浏览器出了什么问题。谢谢！
好东西戴夫！猜猜可能还有其他因素会影响您实际项目中继承自其他样式的不同焊盘和边距。
我只是使用一个测试页面，没有大项目或大 CSS 级联。将再次检查。

【解决方案2】：

您只需要为此使用边距。看看这个jsfiddle

http://jsfiddle.net/ashburlaczenko/YUcHS/1/

【讨论】：

在 jsfiddle 中输入此代码。它几乎符合我的意图，但高度明智的是内部 div 来自外部 div。[code] #div1 { height: 300px;宽度：200px；边框：2px 纯红色； } #div2 { 高度：100%;边框：2px 纯蓝色； }
jsfiddle.net/biznuge/FGQRm/11 - 您之前的帖子，但在外部 div 的底部添加了 4px 填充。或 内边框宽度 * 2

【解决方案3】：

这里，这使用了基本的填充和弹性盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{
        width: 200px;
        height: 200px;
        background: red;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
    }
    .mini-box{
        width: 200px;
        height: 200px;
        background: rgb(128, 93, 93);
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="mini-box">

        </div>
    </div>
</body>
</html>

【讨论】：