Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/fortran/2.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 为什么overflow:hidden会让我的标题填充上面的空白?_Html_Css - Fatal编程技术网

Html 为什么overflow:hidden会让我的标题填充上面的空白?

Html 为什么overflow:hidden会让我的标题填充上面的空白?,html,css,Html,Css,当前正在尝试创建标题栏 添加overflow:hidden to my header标记允许header占用其上下的可用空间,但为什么会这样?我以为溢出:隐藏只是为了隐藏滚动条?如果去掉overflow:hidden,您可以看到header标记返回到只占文本的高度 HTML: 将溢出更改为除可见之外的任何内容都会更改。如果希望它在不溢出:隐藏的情况下尊重线高度,请将h1的显示更改为内联块,如下所示: 身体{ 背景色:F4; 颜色:555; 字体系列:Arial、Helvetica、无衬线字体;

当前正在尝试创建标题栏

添加overflow:hidden to my header标记允许header占用其上下的可用空间,但为什么会这样?我以为溢出:隐藏只是为了隐藏滚动条?如果去掉overflow:hidden,您可以看到header标记返回到只占文本的高度

HTML:


将溢出更改为除可见之外的任何内容都会更改。如果希望它在不溢出:隐藏的情况下尊重线高度,请将h1的显示更改为内联块,如下所示:

身体{ 背景色:F4; 颜色:555; 字体系列:Arial、Helvetica、无衬线字体; 字体大小:16px; 线高:1.6em; 边际:0px; 填充:0px; } .主货柜{ 宽度:80%; 保证金:自动; } 主割台{ 背景色:F7440; 颜色:ebebeb; } 主割台h1{ 显示:内联块; } 测试头 知识产权是一种权利,是一种精英的权利,是劳动和财富的暂时性权利。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡


h1的默认边距为0。代码中没有边距:0应用于h1。将正文边距设置为0是否会将该标记内的所有元素边距设置为0?否,将边距:0设置为正文仅将边距:0设置为正文
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <header id="main-header">
            <h1>Test Header</h1>
        </header>

        <nav id="site-navigation">
            <div class="main-container">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </nav>

        <main>
            <div class="main-container">
                <section id="main">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </section>
            </div>
        </main>

    </body>
</html>
body{
    background-color:#f4f4f4;
    color:#555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0px;
    padding: 0px;
}

.main-container{
    width:80%;
    margin:auto;
}

#main-header{
    background-color: #f74040;
    overflow: hidden;
    color: #ebebeb;
}