Margin of Paragraph Tag goes outside of Div

Question

Extra margin from a paragraph tag is forcing a button downwards. I am trying to understand why.

Here's one answer I tried looking to find an answer from : is it a bug? margins of P element go outside the containig div, however the answer quotes "collapsing margins" but I don't understand why that would be a correct answer, as margins don't seem to be collapsing in this case but expanding.

I understand the problem can be fixed by giving the paragraph tag a margin of 0, but I want to know why the margin is bleeding, and (if is due to margin collapse), a more verbose explanation from the other answer..

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

score 1 · Answer 1 · answered Dec 31 '16 at 01:09

There isn't a problem with the margin of the p-tag.

Your #messagesArea height is too high. You can fix it by decreasing it to height: 338px; as shown in the example below:

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

+1 Thanks for your reply kkreft. your answer sparked an epiphany. The main reason for my woes was because I set a max height on the outer div and adding padding and borders was causing total height to be bigger than what I had allotted...smh. In the future, I will either be very cognizant about counting width, height and border for a "total width" before coding up my HTML or simply give heights to individual elements and let the total height of the parent container be as big as need be. — Govind Rai, Dec 31 '16 at 21:15

Margin of Paragraph Tag goes outside of Div

1 Answers1