Using Padding in CSS

The CSS padding properties define the space between the element border and the element content. -W3Schools

Ever had a teacher ask you for more breathing space around your text or image in a print project? Well when making a website, it is called padding. Padding is your friend when you are giving space between an object's border and the actual object. Unlike margin, padding applies directly to the object. Margin is the space around an element, or outside its border.

A Clearer Explanation

Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.

Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.

Using This Padding

When using padding, you are able to use these size values: pixels, points, ems, or percent.

Padding can be manipulated on the top, right, bottom and left of your object. You can change the padding on all sides at once, two at a time, three at a time, or each one separately.

Here is how to change the padding around your object all at once.

CSS Code:
  1. img {
  2. padding:10px;
  3. }

The above shows the img element receiving 10 pixels of padding on each side of it. Also, keep in mind that using the word "img" makes the padding apply to ALL image tags. If you want to apply your padding to one or two images, create a class for those set of images, or type into the tag some inline styles.

Now what if you want to apply different amounts of padding to different sides? That's easy!

CSS Code:
  1. img {
  2. padding-top:5px;
  3. padding-right:10px;
  4. padding-bottom:5px;
  5. padding-left:15px;
  6. }

The nice part about this, is that you can write them in any order that you like. But what if you don't have time to type out each side? Here's a shorthand and better way to write padding for each side.

CSS Code:
  1. img {
  2. padding:10px 5px 15px 5px;
  3. }

When writing the above syntax, applying your padding is quicker and simpler. However, you must remember that since you are not directly telling the browser the value of each side, so now it will take your values in order. The first value (10px) is your padding-top. The second value is your padding-right, the third is padding-bottom and the fourth is padding-left. Memorize this direction! This direction applies to padding as well as margin, border and other properties.

CSS Code:
  1. img {
  2. padding:10px 5px 15px 5px;
  3. margin:10px 5px 15px 5px;
  4. }

It's not Over Yet! Shortening Your Padding Shorthand

Now you may have noticed in our padding property example that we have "5px" twice. Who wants to write that over and over? Another way to write our above code is this.

CSS Code:
  1. img {
  2. padding:10px 5px 15px;
  3. }

This time, you have THREE values. This code says that padding-top is 10px, padding-left AND padding right is 5px, and the padding-bottom is 15px. In other words, if you have the same left and right values, you can combine them as the middle padding value, and the browser will read it as such.

One more way is to combine top and bottom and left and right values, if they are the same value.

CSS Code:
  1. .img1 {
  2. padding:10px 5px 10px 5px;
  3. }
  5. // OR
  7. .img2 {
  8. padding:10px 5px;
  9. }

Insane huh? Now you have a trillion ways to use padding! (About 5, actually) I still prefer to write out the four values on one padding property, just to be safe (I can be forgetful sometimes). Whatever you choose, ALWAYS give your images and text breathing room within their borders. It is better for everyone's vision.

CSS Code:
  1. //normal padding
  2. .img1 {
  3. padding:10px;
  4. }
  6. //writing out separate padding properties for each side
  7. .img2 {
  8. padding-top:5px;
  9. padding-right:10px;
  10. padding-bottom:5px;
  11. padding-left:15px;
  12. }
  14. //all four padding values on one property
  15. .img3 {
  16. padding:10px 5px 15px 5px;
  17. }
  19. //left and right padding combined
  20. .img4 {
  21. padding:10px 5px 15px;
  22. }
  24. //top and bottom combined, left and right combined
  25. .img5 {
  26. padding:25px 50px;
  27. }

Any of these syntaxes are acceptable! Enjoy!

Add comment

Security code


Visit Betfair Review