HTML元素的高度相同，但另一个在视觉上更大

Question

＆＃34;登录输入聊天＆＃34;按钮应该适合messageBox div，但是（视觉上）比messageBox大。我甚至做了填充和边距0，但它没有改变任何东西。

这里的罪魁祸首是什么（除了我自己）？

＆＃13;

＆＃13;

#chatbox {
    width: 500px;
    height: 500px;
    background-color: lime;
    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: 0;
}

＆＃13;

<h1>Chat with Customer Service</h1>
        <div id="chatbox">
            <div id="loginContainer">
                <form id='loginForm'>
                    <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;

＆＃13;

＆＃13;

Answer 1

1. p中的#messagesArea元素有一个保证金值。
2. #messagesArea有填充。

删除这两个，你就完成了：）

#messagesArea {
    padding: 0;
}

#messagesArea p {
  margin: 0;
}

这是一个有效的例子：

#chatbox {
    width: 500px;
    height: 500px;
    background-color: lime;
    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: 0;
}

#messagesArea p {
  margin: 0;
}
#messageBox {
    height: 100px; 
    padding: 1px 1px;
}

#messageForm {
    display: none;
}

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

<h1>Chat with Customer Service</h1>
        <div id="chatbox">
            <div id="loginContainer">
                <form id='loginForm'>
                    <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>

  

注意 - 如果确实需要这些边距/填充值，请确保使用正确的#chatbox值设置容器（height）。在您的情况下 - 它应该是512px - 它将包括#messageArea的填充和#messageBox的边框。