Question

Here’s an image:

The HTML is in a php which is as follows:

print "<p class = 'Back'>Epic Fail</p>";
print "<p>You forgot to put in your Username or Password.</p>";

The CSS for the Back class and p is as follows:

p.Back
{
font-size: 200px;
display: block;
text-align: left;
font-style: oblique;
}
p
{
font-size: 20px;
color: #292421;
font-family: Times;
}

This is all wrapped in a div tag that has around 25px padding, why is there so much white space? It’s a problem because it creates a scroll bar which I don’t want and it doesn’t look very good.

EDIT:
Here’s the div:

#login
{
background: #E0DFDB;
width: 1200px;
margin: auto;
}

I’m using the latest version of Google Chrome (Sorry for not specifying)
The scroll bar is successfully removed by taking away the padding from the login div and the line-height. However, there is still the white space and I have thoroughly ran through all of my code to see if I’ve added anything to the p tag but I couldn’t find anything. Is there a site where I can upload all of my code to show you guys?

RESULT:

Thanks guys, I decided to use the web dev tool that came with google chrome and IT TURNS OUT: THE MARGIN BY DEFAULT SOMEHOW GOT SET TO 200PX??!! so all I had to do was just set the margin for p to auto

Answer 1

This happens because, by default, Chrome applies a style of -webkit-margin-before: 1em; -webkit-margin-after: 1em to p elements. In your example, this would create a 200px margin above and below the element. Setting margin: auto or any other margin value overrides this default.

Other browsers apply a default margin to p elements in different ways: e.g. Firefox applies margin: 1em 0 which results in the same effect.

The margin does not appear on jsfiddle because they employ a reset stylesheet which gives p elements margin: 0.