CSS Lesson 6: Shorthand Properties (Padding and Margin)

The padding and margin CSS properties are essential in building web layouts.  Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element.  If you are a beginner, this is the code you would likely use:

#header {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 6px;
    padding-left: 15px;
}

However, there is a much more efficient (not to mention easier!) way of applying four padding or margin values. Here is your first glimpse of CSS Shorthand in action; the following code achieves the same exact results as the padding example I just provided:

CSS Shorthand graph

You simply list four values, one directly after the other, and the web browser interprets this as the four (clockwise- top, right, bottom, left) directional values.

Similarly, you can also list two values in a row and the browser will interpret the first to be both top and bottom, and the second value to be both left and right.

CSS Shorthand graph 2

Using this new knowledge, let’s imagine we need to add 10 pixels of right margin and 15 pixels of bottom margin to an element. Here’s the code we would use:

#header {
    margin: 0 10px 15px 0;
}

We used the four-value shorthand syntax, and simply included zeroes for the directions (top and left) we didn’t want to apply margin to.

That’s it for today’s lesson. Hopefully your CSS code will be a little cleaner with these simple shorthand methods.

If you prefer to watch video lessons instead of reading written lessons check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

7 thoughts on “CSS Lesson 6: Shorthand Properties (Padding and Margin)

  1. This material has really blessed my life, with the material I was able to find my way to CSS programming which seemed impossible to me before. Thanks.

  2. I borrowed a book from the library on the subject of html, but found this tutorial so much more effective to learn from. Thank you!

  3. First, thanks for making this great website! Your tutorial about CSS and HTML are so easy to understand, it’s a pleasure to read them.

    I have a question. Before finding this website, I actually didn’t know that you could use the pre-installed notepad in Windows as a code editor. So my question is how far can you use the notepad to make your own website? Would it be nessecarry to find a more advanced editor like edit++ to make website which can be launced? What’s the limit of notepad?

  4. Hi Michael,

    You’re welcome, and I’m glad you enjoyed the lessons!

    How far can you use Notepad to make your own website? You could create the next Facebook using Notepad and the command line 🙂

    However, the question becomes “how enjoyable was the coding process?”

    The biggest reason I use TextMate (for OS X) and recommend E-Text Editor or Sublime Text or Notepad++ (for PC) is syntax highlighting. Depending on the language you are coding in the text editor will highlight different sections in different colors. It makes it a lot easier to see “What’s what” in your code in just a quick glance.

    Also text-editors will include line numbers along the far-left margin (which will be an absolute necessity as your progress).

    Text-editors will also make indenting code, and many other tasks a lot simpler and more enjoyable. TextMate (and many other editors) have a feature called “Tab triggers” which allows you to setup custom snippets so that you can simply type in the letters “nav” and then hit TAB on your keyboard and the text-editor will automatically swap out the letters “nav” with the markup for a HTML unordered list navigation structure.

    I recommend you try out various editors until you find one you like!

  5. Brad, thank you again for this helpful tutorial. There are some aspects of coding that I learn quickly and easily. Yet, there are other aspects that I seem to have more trouble understanding. I was completely frustrated by the concepts of padding and margin until I read this short, simple tutorial. I actually understand it now! It’s amazing how one person can explain something so clearly in such a small lesson when others can’t seem to explain it well no matter what lengths they go to. I hope you’ll continue to expand your library of lessons. You’re terrific!

Leave a Reply

Your email address will not be published. Required fields are marked *