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

我正在尝试添加 <p>到我的<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 <-- jsbin.

编辑:添加溢出隐藏似乎可以解决问题(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>

最佳答案

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

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

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

关于html - 为什么添加段落时我的 div 会向下移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37646275/

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

上一篇：css - Bourbon Neat - 全宽外容器，无排水沟

下一篇：重写我的 htaccess 后，Php PDO 和 Get 方法无法在干净的 URL 中工作