CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes Substring Matching Attribute Selectors - "Begins With" and "Ends With"

Zijun Liao
Zijun Liao
13,409 Points

Padding on the background vs padding on the text

There is a padding on the a[href^="http://"], and a[href^="http://"] seems to target the whole element include the background image and the text, I just wondering why only padding-left only apply to the text and background image keep at the left-hand side.

What code should I write if I would like to apply the padding to the background image as well, thank you.

1 Answer

Steven Parker
Steven Parker
207,972 Points

As you saw, the "padding" property applies only to contents, not to backgrounds. To shift the background over, you can use the "background-position" property:

  background-position: 25px 0;

But you would probably not want to do this here, since that would place the icon under the text.