Correct filling of the text

Question

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

Answer 1

This is because the width does not contain any padding or margins that elements can have. You will need to subtract 40px from your total width size to keep it the same size.

Try the following:

.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 better centered.