Question

段落标记的额外边距会强制向下按下按钮。我想了解原因。

以下是我试图找到答案的一个答案：is it a bug? margins of P element go outside the containig div，但答案引用了＃34;崩溃的边距＆＃34;但是我不明白为什么那会是一个正确的答案，因为在这种情况下，利润似乎并没有崩溃，而是在扩大。

我理解这个问题可以通过给段落标记边距为0来解决，但我想知道为什么边距正在流血，并且（如果是由于保证金崩溃），从另一个答案得到更详细的解释。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

p - 标签的边距没有问题。

您的#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>

段落标记的边距超出了Div

1 个答案: