时间戳

首页 > 解决方案 > 为什么当溢出设置为“可见”时我的 div 会缩小，但当 div 设置为溢出或自动时会扩展？

html - 为什么当溢出设置为“可见”时我的 div 会缩小，但当 div 设置为溢出或自动时会扩展？

问题描述

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

例如，完整的 JSFiddle，只需添加overflow:auto到 CSS 中的“英雄容器”即可“修复”它。

#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;
}
<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>

有人可以向我解释这个逻辑，因为我很困惑。如果它只是 a<p>并且它的父母的高度是偶数，那么需要溢出吗？

标签： htmlcss

解决方案

因为<p></p>有默认的顶部和底部边距，如果你设置*{margin:0;padding:0;box-sizing:border-box;}你就没有这个问题。

推荐阅读