CSS 高度和宽度在父 div 和子 div 之间不一致答案

【问题标题】：CSS Height and Width Aren't Consistent between Parent and Child divCSS 高度和宽度在父 div 和子 div 之间不一致
【发布时间】：2019-02-22 02:09:33
【问题描述】：

我正在尝试创建一个标题，该标题在左侧显示标题，在右侧显示按钮列表。为了实现这一点，有一个父#ChatHeader div，其中包含两个子div，#ChatHeaderTitle 和#ChatHeaderControls。

由于某种原因，父 div 中 8vh 的高度与子 div 中 8vh 的高度不同。两个 div 的高度都设置为 8vh，但父 div 看起来比子 div 小。我的宽度也有同样的问题。

我确定我遗漏了一些明显的东西，但我一直在尝试我能想到的一切但无法修复它。

我的 HTML 的简化版：

<div id='ChatHeader'>
    <div id='ChatHeaderTitle'>
        Title
    </div>
    <div id='ChatHeaderControls'>
        Controls
    </div>
</div>

听听我的 CSS：

#ChatHeader {
    width:100%;
    height: 8vh;
    overflow: hidden;

    background-color: #000000;
    color: var(--std-background-colour);   
}

#ChatHeaderTitle {
    height: 8vh;
    width: calc(100% - 8vh);

    padding:1vh;
}

#ChatHeaderControls {
    height: 8vh;
    width: 8vh;

    float:right;
    padding: 1vh;
    font-size:1.5vh;
    color: var(--std-background-colour);
}

【问题讨论】：

标签： html css web height width

【解决方案1】：

对内边距和边距进行重置总是一个好主意，这样您就知道自己是从零开始的。

这里是基本的——你在右边的 div 上有填充，它将 div 扩展到比你想要的大。是的，在 div 的内部可以看到填充，但它会根据填充量扩展 div。如果你想使用 1.5vh 的填充，你应该让你的右 div 8vh + 1.5vh = 9.5vh（或 8vh - 1.5vh = 6.5vh，取决于什么你在你的盒子里），而不是 8vh。 "By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added."

此外，您的第二个 div 向右浮动，但您的第一个 div 没有向左浮动 - 所以您的浮动不太正确。如果向左 div 添加左浮动，则尊重右浮动 div。

我有下面的代码可以为你工作。但是，如果我是你，我会考虑将其转换为网格布局，而不是浮动 div——它最终会让你的生活更轻松。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body, #ChatHeader, #ChatHeaderTitle, #ChatHeaderControls {
            padding : 0px ; 
            margin : 0px ; 
        }
        #ChatHeader {
            width:100%;
            height: 8vh;
            overflow: hidden;
            background-color: #000000;
        }       
        #ChatHeaderTitle {
            height: 8vh;
            width: calc(100% - 8vh);
            background-color : pink ; 
            padding:0vh;
            float : left ; 
        }       
        #ChatHeaderControls {
            height: 8vh;
            width: 8vh;
            background-color : blue ; 
            font-size:1.5vh;
            float : right ; 
        }
    </style>

</head>
<body>
<div id='ChatHeader'>
    <div id='ChatHeaderTitle'>
        Title
    </div>
    <div id='ChatHeaderControls'>
        Controls
    </div>
</div>
</body>
</html>

【讨论】：

谢谢，原来我只需要左边的浮动。我用于调试的一些临时边框也弄乱了尺寸（我一直假设边框包含在宽度/高度中）。
这也是一个常见的问题。一切都被添加到一个盒子的宽度上——边框、填充、边距。它使像素完美的设计成为一种超级大国。