padding + width

Question

I have links with bottom border, in CSS like this:

a {
    display: block;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    border-bottom: 1px solid #EEE;
}

I have problem because the 'padding' value is getting added to the width value and border bottom is too long:

http://screenshooter.net/9186066/advygxa

Have you any idea?

Answer 1

It's working fine, check http://jsfiddle.net/GjMQe/

a {
display: block;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;

}​

Perhaps you forgot to include a reset.css file in your template.

Check Normalize.css

Answer 2

Add this to the div that contains the links.

overflow-x:hidden;

Demo: http://jsfiddle.net/calder12/zXmG3/

Answer 3

Padding and width have a hard time coexisting; simply remove your width declaration. Since your anchors are block, they will automatically take up 100% width (including padding):

a {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    border-bottom: 1px solid #EEE;
}

Now it should take up a 100% width.

Answer 4

That's what padding does. Look at how the layout model works: adjust accordingly. If you're looking for a flexible solution then you need to remove the padding from the a element and add something like an internal span that has the proper margin within the a and other dials adjusted accordingly.