css: How get rid of this extra white space after and before text?_问答_开发者

Here's an image:

css: How get rid of this extra white space after and before text?

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

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.

I've created a JSFiddle version of the code you've posted -- see http://jsfiddle.net/RukbS/

In my JSFiddle, I can't see the massive empty space beneath the "Epic Fail" which is in your screenshot, so I guess there's something in the code you're running which you haven't shown us.

Without seeing your code actually in action, it's hard to know what the difference is between it and the version I've created, but looking at the screenshot, it looks very much as if the "Epic Fail" paragraph has run over two lines.

The only way I could get my test to replicate this was by putting <br><br> immediately after the word "Fail". I'm assuming you're not doing that.

You might want to consider dropping the line-height attribute from the stylesheet. It isn't really achieving much (as it will pick up that size anyway due to the font size), and is the sort of thing that might be causing what you're seeing. If you really do want a bit of extra space around the text, use padding or margin instead; it's easier to control than line-height.

You didn't state which browser you're using that shows this effect. It is possible that you're seeing something that only shows up in certain browsers. Most browsers these days come with a good debugging tool which can help isolate issues like this. In Firefox, you'll need to install the Firebug plugin; in most other modern browsers, the Developer Tools feature is built in.

Open the Firebug/Dev Tools window, and use it to find the "Epic Fail" element. It will allows you to examine the size and shape of the element, and what styles are being applied to it. This will almost certainly give you the information you need to work out what the problem is.

I know I haven't given you an answer that directly solves the problem, but I hope some of the things I've pointed out here will lead you in the right direction to finding the problem.

Not sure what you are trying to accomplish, but the combination of