When I Add Padding, H1 Gets Bigger. Why?

In order to accommodate a background image, I have designated a specific width and height for my h1 element:

h1 {
width: 500px;
height: 50px;
background: #fff url(h1.png) no-repeat center center;
}

Code (markup):

The problem is, the h1 text now sits at the top left-hand corner of the box. I can push it down and to the right using padding, but this makes the box's width and height get bigger.

How can I place the text wherever I want within the h1 box without making the box get bigger?

 

When you add padding, subtract it from your height and width.

 

Thanks for the response. One rep point for you.

But are you sure that that's safe? Perfecting the positioning of something by way of finely tuning padding, width and height seems risky. Will all of the major browsers render it the same? I'm using pixels as my unit of measurement.

 

The problem with using padding is, you'll see it whenever there's a background colour or image.

Adding padding is like adding fat to a person sitting in a chair. If you keep adding padding, eventually their sides will touch the armrests. You are increasing the space between the skin of the person (outside edge) and the organs who stay inside (your content area). This is why your h1 grew in total size. People do too. If you only added fat to one side of a person, you get the general effect of moving their inner organs further to the right.

You might want to check out margins. Unlike padding, margins don't affect the size of the element. It's more like that invisible reality distortion field Steve Jobs has around him that makes his followers worship him... oh yeah and it can push others away from him too.

So for example to push your header away from the left edge of its container, see what happens when you
h1 {
margin-left: 20px;
}

units can be anything.

Margins sometimes don't do what you expect them to. This is because of margin collapse (vertical margins only, you want to google this one because it's important! and you'll see it!) and also IE collapses margins when it shouldn't and doesn't when it should.

Still those can all be worked around most of the time. Usually moving someone around, we use margins (note, margins work on block elements and inline-block elements. You usually can only make side margins on inlines.

 

Thanks, Stomme Poes.

I can't do it with margins, dude. I've already used margins to position the h1 element on the page. What I want to do is position the h1 anchor text within the h1 box. The box is wider and taller than usual because it has to display a background image.

MJewel's suggestion has worked. The thing is, I don't know how foolproof the method is. In particular, I don't know if all major browsers will render the same effect. In the mean time, I'm going to just leave it. I'll do a browser compatibility check later.

 

That's a useful bit of information that pretty much changes everything. I'm no mind reader.

Since you posted no CSS for any anchors, I can only assume that your anchor is still inline (the default). You can add padding in any direction around your anchor, and if the anchor doesn't have a background image or colour then nobody will see the spacing (it will increase the clickable area though because also on inlines the total size of the element increases when padding is added).

If the padding is being added to the h1 , then as I said this is like "adding fat" to it, and increasing the distance between its outer edge and its content area (where the anchor is). Of course, you can still use margins on the anchor to move it, but if it's still an inline element you'll only get horizontal margins (it would have to be either a block or inline-block to get top-bottom margins) and also vertical margins in this case would collapse (a top margin on the anchor would collapse into the h1's top margin and could push the whole h1 away from where its top currently is). Though one way to stop margin collapse is to add either the bare minimum of padding (1px top padding would do it) on the anchor OR borders work too (but you don't want to see it, so it could be an invisible border lawlz).

I rarely use padding to position stuff, and when I do, it's usually for inlines where I want to keep them inline and don't mind making them a bit taller. Usually menus.

In any case, your padding solution should be the same cross-browser and you shouldn't have to worry about it (not counting IE5.5 and below or IE6/7 if they are in Quirks Mode, but I am assuming you don't code for ancient browsers and that you have a good doctype on your page so IE6 and 7 are on their Good Behaviour).