CSS properties direction (padding, margins, etc)

You’ll have no doubt seen:

padding: 5px 10px 5px 10px;

in a CSS file. Do you ever wonder which of the properties are which?

Just start at the top and move clockwise until you reach the left side.

Top Right Bottom Left

It saves doing this:-

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

Just a simple one that I’m sure 99.9% of people knew.

3 comments on “CSS properties direction (padding, margins, etc)

  1. Donkey November 25, 2011 3:05 pm

    How many years did you not know about that? 🙂

    • admin November 25, 2011 3:07 pm

      I always either used the separate way or changed them until I got it working…

  2. PetrUrban November 28, 2011 8:13 am

    This answers the thing … works for “margin” as well…

    The padding property can have from one to four values.

    padding:25px 50px 75px 100px;
    top padding is 25px
    right padding is 50px
    bottom padding is 75px
    left padding is 100px

    padding:25px 50px 75px;
    top padding is 25px
    right and left paddings are 50px
    bottom padding is 75px

    padding:25px 50px;
    top and bottom paddings are 25px
    right and left paddings are 50px

    all four paddings are 25px

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.