Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Padding

Here’s how to add padding to an HTML paragraph element in an external style sheet:

p {padding: 7px;}

Wow, that was easy. I can’t believe I used to earn my living writing this stuff before I retired.

Anyway, with above style rule, any time we created a <p> element on our page there would be seven pixels of padding between the content of the paragraph and the outer edge of the paragraph element. Think of the paragraph like a box and that will help you visualize it . . . or just take a look at the two paragraphs I cleverly provided below and save your thinker some thinking.

The top paragraph has no padding. The bottom paragraph has 7 pixels of padding.

Notice in the paragraph with the lighter background color how the text pretty much butts up against the edges of the paragraph box.

Now look at the paragraph with the darker background color and see the padding (cushion of space) between the text and edges of the paragraph box. While that may not seem important right now, it really can be in many circumstances.

For example, if you have text running along side a picture it can make it more of a chore to read, plus it just doesn’t look as nice with the text butting up against the image. It's like they're battling for territory.

To keep the text from butting up against the image you can add padding to its containing element (paragraph, division, etc.) that borders the image. You can add padding to just the side that borders the image or to any and all sides, as needed.

The code sample I showed at the top of the page for adding padding to the paragraph is the quick way to code it if you want the padding on each side to be the same. Each side can be set separately if different amounts of padding were desired.

I admit that example looks kind of goofy, but then, so do I. Anway, I did it for you, so send me a dollar.

I set the padding like this:

When coding shorthand styles like that, individual values always go clockwise: top, right, bottom, left. The longhand version, which means the exact same thing as the shorthand above, is written as:

If you want the padding to be the same on all sides, you can simply use the shortest shortcut:

If you want the padding the same on the top and bottom, and the same on the left and right, but want the padding on the top and bottom different from the padding on the sides, use this shortcut:

In that example the padding at the top and bottom would be 17 pixels, but the padding on the sizes would be zero. You don't have to include the unit of measure if the number is zero. Zero is zero whether it's in pixels, em units, lightyears, or something else.

Padding can also be added using an inline style. Example:

In that example I set the padding for a division element to 12 pixels. All sides of the division would have a padding of 12 pixels.

Are you loving this stuff, or what!