Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 为什么底部对齐的组件超出<；车身>；？_Html_Css - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 为什么底部对齐的组件超出<；车身>；？

Html 为什么底部对齐的组件超出<；车身>；？

html css

Html 为什么底部对齐的组件超出<；车身>；？,html,css,Html,Css,我放置的元素与主体的顶部和底部对齐，主体的大小已明确设置： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body {

我放置的元素与
主体的顶部和底部对齐，主体的大小已明确设置：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                height: 1024px;
                width: 1280px;
                font-size: 20pt;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }
            div {
                background: red;
                color: white;
            }
            .down {
                margin-top: auto;
            }
        </style>
    </head>
    <body>
        <div class="up">upper text</div>
        <div class="down">lower text</div>
    </body>
</html>




身体{
高度：1024px；
宽度：1280px；
字号：20pt；
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
}
div{
背景：红色；
颜色：白色；
}
.下来{
页边顶部：自动；
}
上部文本
下文本


但是，底部元素超出了预设大小（我附加了两个屏幕截图，因为我不能同时使用Chrome开发工具显示计算的大小和标尺应用程序显示其长度-这是同一个窗口）：




为什么会这样？在计算位置时，不应该考虑
div的所有组件（内容、填充、边框）吗？
您需要从正文中删除默认的
边距
：


      body {
        height: 1024px;
        width: 1280px;
        font-size: 20pt;
        display: flex;
        flex-direction: column;
        margin: 0;
      }



您是否尝试过重置主体的默认值

如果没有，你可以试试这个


body {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}



非常感谢。我不知道默认情况下有保证金。我认为，如果不设置，它将自动计算（因此，
body
将没有）。