CODEWITHSUNDEEP
htmlcss
Zhianc
Zhianc

Reputation: 1451

Proper Text Padding

I tried using padding:10px to this example but it makes the div move to the left. Any solutions you might think?

Upvotes: 4

Views: 100

Answers (1)

animuson
animuson

Reputation: 54719

That's because the width does not include any padding or margin you might have on the element. You'll need to subtract the 40px from your total width size to keep it the same size.

Try this:

.promo {
    color:#5f5f5f;
    width:240px;
    height:74px;
    background:url('http://i27.lulzimg.com/e1de57065d.png') no-repeat;
    float:right;
    display:block;
    margin-top:20px;
    padding: 20px;
}

http://jsfiddle.net/animuson/NncNE/3/

Edit: If you want, you can use padding: 15px 20px, I think it looks better and it's better centered.

Upvotes: 7

Related Questions