为什么添加段落时我的 div 会向下移动？答案

【问题标题】：Why does my div move down when I add paragraph?为什么添加段落时我的 div 会向下移动？
【发布时间】：2016-06-06 04:39:22
【问题描述】：

我正在尝试将<p> 添加到 my<div class="titleheader">。所以在我的 div 中作为这样的子元素：<div class="titleheader"><p>generic text </p></div>.

但是当我尝试添加<p> 时，我的<div class="titleheader"> 不会停留在同一位置并向下移动。为什么会这样？

http://jsbin.com/yitazifivu/1/edit?html,css,output

编辑：添加溢出隐藏似乎可以解决问题（thx kameer），但为什么没有它实际上会向下移动..？我很好奇刚刚发生的事情并试图学习。

/* css bestand */

body {
    margin: 0;
}

.container{ 
    background-color: gainsboro;
    width: 1000px;
    height: 950px;
    max-height: 950px;
    margin: auto;
}

.blank1 {
    background-color: white;
    display: inline-block;
    width: 9%;
    height: 9%;
    margin: 10px 30px 60px 65px;
}

.titleheader {
    display: inline-block;
    background-color: #3B3F40;
    width: 65%;
    height: 15%;
    margin-bottom: 20px;
}

.content {
    display: block;
    background-color: gray;
    width: 100%;
    height: 33%;
}

.small-a {
    background-color: white;
    display: inline-block;
    width: 14%;
    height: 3%;
    margin-left: 3%;
    margin-top: 1%;
}

.small-b {
    display: inline-block;
    float: right;
    background-color: white;
    margin-top: 1%;
    margin-right: 5%;
    width: 12%;
    height: 3%;
}

.main-area {
    display: block;
    background-color: gainsboro;
    width: 100%;
    height: 100%;
}

.straight-a {
    float: left; 
    background-color: white;
    margin: 0 10% 0 1%;
    width: 5%;
    height: 20%;
}

.main-area-content {
    float: left;
    background-color: white;
    width: 70%;
    height: 100%;
}

.straight-b {
    float: left;
    background-color: white;
    width: 5%;
    height: 20%;
    margin-left: 8%;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Mert Porfolio</title>
        <meta charset="utf-8"><link rel="stylesheet" href="main.css">
    </head>
    
    <body>
        <div class="container">
            <div class="blank1"></div>
            <div class="titleheader"></div>
            
            <div class="content">
            
            </div>
            
            <div class="small-a"></div>
            <div class="small-b"></div>
            
            <div class="balk-a"></div>
            <div class="content-b"></div>
            
            <div class="main-area">
                <div class="straight-a"></div>
                <div class="main-area-content"></div>
                <div class="straight-b"></div>
            </div>
        </div>
        
    </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

<p> 标签默认有边距。所以尝试重置它们：

p {margin: 0;}
.titleheader {overflow: hidden;}

工作输出：http://jsbin.com/zohapoyivi/1/edit?html,output

【讨论】：

嗯..刚刚尝试设置 p {margin: 0;}，当我添加段落时，div 仍然向下移动。
@Hyrule 将overflow: hidden 用于.titleheader。
嗯..谢谢:-)。但现在我很好奇，我试图理解刚刚发生的事情..为什么它首先会向下移动？为什么溢出可以解决这个问题？
@Hyrule 这个概念被称为边距折叠。搜索隐藏溢出的边距折叠，您就会知道。这是一个巨大的概念。
该行为与边距折叠无关。 Inline-block 元素的垂直边距永远不会塌陷。这个是关于vertical-alignment的，比较常见的解决方法是将.titleheader div的垂直对齐设置为top。

【解决方案2】：

我自己也遇到过同样的问题。它与.blank1 的display: inline-block 有关。

.blank1 {
    background-color: white;
    display: block;
    float: left;
    width: 9%;
    height: 9%;
    margin: 10px 30px 60px 65px;
}

这应该可以解决问题。

【讨论】：

【解决方案3】：

这是因为 display 属性的工作原理。要快速解决此问题，您需要向您添加新的p 标记属性：display: table;，然后您就完成了。

【讨论】：

请永远不要使用tables 或类似的东西进行布局。这会起作用，但这不是语义方式。 :)