Question

我对这个项目有一个问题，其中div似乎与它上面的div有差距。调试后，我发现差距不仅在顶部，而且在底部。当我添加overflow:auto或overflow:hidden时，神秘的间隙消失，div触摸（根据需要），但是当我设置overflow:visible或者根本不设置它时，大约40px从顶部和底部取下。为什么要这样做？

Full JSFiddle for example，只需将overflow:auto添加到＆＃34; hero-container＆＃34;在CSS中修复＆＃39;它

＆＃13;

#header{
    height: 50px;
    background-color: #05568D;
    border-radius: 10px 10px 0px 0px;
    position: relative;
}

#header > ul{
    list-style-type: none;
    padding: 0px 20px 0px 20px;
    margin: 0px;
    background-color:darkmagenta;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#header > ul > li{
    padding: 0px 10px 0px 10px;
    color: white;
    font-size: 20px;
    float: left;
    background-color: red;
}

#hero{
    background-color: white;
    border-radius: 0px 0px 10px 10px;
}

#hero-container{
    margin: 0px 100px 0px 100px;
    background-color: red;
    overflow: visible;
}

body{
    background: #0769AD;
    margin: 0;
    padding: 0;
    font-family: 'Teko', sans-serif;
}

.container{
    width: 96%;
    margin: 0 auto;
}

＆＃13;

<div id="header" class="container">
       
       <ul>
           <li>Download</li>
           <li>API Documentation</li>
           <li>Blog</li>
           <li>Plugins</li>
           <li>Browser Support</li>
       </ul>
       
   </div>
   
   <div id="hero" class="container">
       
       <div id="hero-container">
           
           <p>This is a paragraph</p>
           
       </div>
   </div>

＆＃13;

有人可以向我解释这个逻辑因为我感到困惑。如果它只是一个<p>并且其父母的高度被设定，那么溢出的需要是什么？

Answer 1

由于<p></p>的默认边距为top和bottom，因此如果设置*{margin:0;padding:0;box-sizing:border-box;}，则不会出现此问题。

当溢出设置为“可见”时，为什么我的div会缩小？但是当div设置为overflow或auto时会扩展？

1 个答案: