CODEWITHSUNDEEP
csspadding
Gus
Gus

Reputation: 16017

Padding taking more space than the required

I'm having a weird error with padding. I am creating a two-columns layout and when I try to add a padding to the footer div it takes more space than I want. I have already looked for this problem but couldn't find no useful answer. For instance, if I put up 1 pixel on the code:

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}

I end up getting more than 1 pixel of a padding, as seen here: enter image description here

The top and bottom paddings have more than 1px of height. So my question is what could be causing this problem?

I've put up a piece of the code in a fiddle and the problem is still there, so I guess the code I've included will be enough to solve this problem, if it isn't just tell me. Fiddle link: http://jsfiddle.net/KhxAW/4/

Upvotes: 0

Views: 383

Answers (4)

Edward Goodson
Edward Goodson

Reputation: 302

If you include the following in your code styles

p.margin
{
margin: 0px;
}

and then inside your <p> tag you include the class="margin" like this:

<p class="margin">Three Rings for the Elven-kings ... </p>

You will be able to set the padding in the <div> tag without interference 
from the <p> tag.

Upvotes: 0

Mahavir Nahata
Mahavir Nahata

Reputation: 292

Just Replace Your Footer Div With This One->

<div id="footer">
                <p style="display:inline">Three Rings for the Elven-kings under the sky, seven for the Dwarf-lords in their halls of stone,
                Nine for Mortal Men doomed to die, one for the Dark Lord on his dark throne, in the Land of Mordor 
                where the Shadows lie. One ring to rule them all, one ring to find them, one ring to bring them all 
                and in the darkness bind them, in the Land of Mordor where the Shadows lie.</p>
            </div>

Upvotes: 1

Marcos Buarque
Marcos Buarque

Reputation: 3418

The issue is with your <p> tag. It has a margin space above and below. I recommend you reset the <p> tag margins somewhere in your CSS code.

Upvotes: 3

Michael
Michael

Reputation: 7092

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}

You aren't using pixels for your units in the padding declaration... You are using EM's. 1EM is equal to the PX size of the font of the parent element. So if your font size is 12px, 0.5em is 6px.

Just change your units to PX...

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 5px;
line-height: 1.1em;
}

Upvotes: 1

Related Questions