Have Geek Brain

Disable crash in this case

If you check the following demo HTML code, you will see an unexpected orange border appear on all browser pages (I checked) at the top of the page. If the <p> tag is replaced with a <div> tag, everything works as expected.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Lay-Out</title>         
        <style>
            html{
                overflow: auto; /*for IE*/
                height: 100%;
            }

            body{
                background-color: orange;
                margin: 0;
                height: 100%;
            }
            #page{
                background-color: green;

                height: 100%;
                margin-bottom: -50px;
            }
            #footer{
                background-color: red;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <p>test</p>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

This is due to the <p> having a top margin and collapsing the border to its parent. While this is a desirable effect for creating text paragraphs and the like, it is rarely useful for layouts.
How can I make sure no borders are added to certain elements (in this case, from <to parent div)?

- UPDATE -
Since all the answers seem to go down to "disable padding on paragraph", I reworked my question a bit and changed the title.
Removing the pad from p is a remedy for the symptom, not the cause.

0


a source to share


8 answers


the padding for body / html should be reset.



+5


a source


The element <p>

has a default margin-top

that pushes all content down. You can get rid of it by using margin-top: 0

on this <p>

.



+2


a source


All browsers load a default stylesheet before any styles you define.

This is the style you see when you load "plain" HTML into your browser.

You should learn and use CSS reset in almost all of your projects.

+2


a source


This is because it <p>

is a block element and always starts on a new line. if you want your code to work with tag <p>

then add CSS to it

p
{
    display:inline;
}
0


a source


This is a bit lame, but I actually found it myself.
Once again, crumbling borders bring me down. Here is a nice forum post that describes it. In my design, it was appropriate to remove the marker from the <p> element. From what I've read, the next best thing is giving parents a tiny margin.

0


a source


add this to your styles:

#page p{ margin-top: 0; }
0


a source


Yes, there will be a space at the top because the paragraph leaves some space before and after. The following will remove the space, try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Test Lay-Out</title>                     
                <style>
                        html{
                                overflow: auto; /*for IE*/
                                height: 100%;
                        }

                        body{
                                background-color: orange;
                                margin: 0;
                                height: 100%;
                        }
                        #page{
                                background-color: green;
                                height: 100%;
                                margin-bottom: -50px;
                        }
                        #page p.first{
                                margin-top:0;
                        }
                        #footer{
                                background-color: red;
                                height: 50px;
                        }
                </style>
        </head>
        <body>
                <div id="page">
                 <p class="first">test</p>
                </div>
                <div id="footer">footer</div>
        </body>
</html>
0


a source


How to add overflow: hidden;

to parent element?

0


a source






More articles:


All Articles