段落标签的边距超出 Div

Question

段落标签的额外边距迫使按钮向下。我正在尝试了解原因。

这是我试图从 is it a bug? margins of P element go outside the containig div 中找到答案的一个答案，但是答案引用了“折叠边距”，但我不明白为什么这是一个正确的答案，因为边距似乎没有折叠在这种情况下，但正在扩展。

我知道可以通过将段落标签的边距设置为 0 来解决问题，但我想知道为什么边距会流血，以及（如果是由于边距崩溃），从另一个答案中得到更详细的解释。 .

.body {
    height: 100%;
}

.error {
    color: red;
}

#chatbox {
    width: 500px;
    height: 500px;
    background-color: #93ff95;
    border: 1px solid black;
}

#loginContainer {
    text-align: right;
    height: 50px;
    line-height: 50px;
}

#loginContainer input {
    height: 25px;
    font-size: 16px;
}

input#login {
    text-transform: uppercase;
    background: none;
    color: blue;
    border: none;
}

#loginForm {
    margin: auto;
    display: block;
}

#messagesArea {
    height: 350px;
    background-color: white;
    padding: 5px;
}

#messageBox {
    height: 100px; 
    padding: 1px 1px;
}

#messageForm {
    display: none;
}

#messageBoxBlocked {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
    padding: 0;
    margin: none;
}

<div id="chatbox">
            <div id="loginContainer">
                <form id='loginForm'>
                    <span class="error">Invalid Username</span>
                    <input type="text" name="username" placeholder="Enter a username"/>
                    <input id="login" type="submit" name="login" value="Login"/>
                </form>
    
            </div>
            <div id="messagesArea">
               <p>Admin: Hey Everyone!</p>
            </div>
            <div id="messageBox">
                <button id="messageBoxBlocked">Log in to enter chat</button>
                <form id="messageForm">
                    <textarea name="messageBox" placeholder="Enter a message"></textarea>
                    <input type="submit" name="Send"/>
                </form>
            </div>
        </div>

Answer 1

p-tag 的边距没有问题。

您的#messagesArea height 太高了。您可以通过将其减小到 height: 338px; 来修复它，如下例所示：

.body {
    height: 100%;
}

.error {
    color: red;
}

#chatbox {
    width: 500px;
    height: 500px;
    background-color: #93ff95;
    border: 1px solid black;
}

#loginContainer {
    text-align: right;
    height: 50px;
    line-height: 50px;
}

#loginContainer input {
    height: 25px;
    font-size: 16px;
}

input#login {
    text-transform: uppercase;
    background: none;
    color: blue;
    border: none;
}

#loginForm {
    margin: auto;
    display: block;
}

#messagesArea {
    height: 338px;
    background-color: white;
    padding: 5px;
}

#messageBox {
    height: 100px; 
    padding: 1px 1px;
}

#messageForm {
    display: none;
}

#messageBoxBlocked {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
    padding: 0;
    margin: none;
}

<div id="chatbox">
            <div id="loginContainer">
                <form id='loginForm'>
                    <span class="error">Invalid Username</span>
                    <input type="text" name="username" placeholder="Enter a username"/>
                    <input id="login" type="submit" name="login" value="Login"/>
                </form>
    
            </div>
            <div id="messagesArea">
               <p>Admin: Hey Everyone!</p>
            </div>
            <div id="messageBox">
                <button id="messageBoxBlocked">Log in to enter chat</button>
                <form id="messageForm">
                    <textarea name="messageBox" placeholder="Enter a message"></textarea>
                    <input type="submit" name="Send"/>
                </form>
            </div>
        </div>