CSS Essentials: Box Model and Padding vs. Margin

Padding and Margins are two of the most used design techniques, introduced widely when CSS became the main design focus by developers. Though these two properties or if we may call it features are not new, most CSS beginners get padding and margins mixed up or at least use them in a wrong way. A lot of confusion and design bugs were introduced by using the "Height" properties incorrectly to imitate padding and margins effect, that's why if you plan to use or need padding and margins effect on you website you'll need to understand the fundamental of these properties first before start developing.

My recommendation: If you're a CSS beginner don't worry, go read this article first then come back to this one.

Make sure you open up the "BoxModel.png" image and keep it open while you read the article.

What Is Padding?

Padding Property: defining the exact space (in pixels) between your element/content and this element border. In other words padding clears an area around the content inside the border of an element. (Padding is the inner space of the element)

Padding Syntax:

padding: length px;
Shorthand property: padding:25px 50px 75px 100px;
(top padding is 25px, right padding is 50px, bottom padding is 75px, left padding is 100px) "Padding values are set clockwise, starting from the top"
Separate property: padding-top, padding-right, padding-bottom, padding-left

What Is Margin?

Margin Property: defining the exact space (in pixels) around elements. . In other words the margin clears an area around an element outside the border of an element. (Margin is the outer space of an element)

Padding Syntax:

margin: length px;
Shorthand property: margin:25px 50px 75px 100px;
(top margin is 25px, right margin is 50px, bottom margin is 75px, left margin is 100px) "Margin values are set clockwise, starting from the top"
Separate property: margin-top, margin-right, margin-bottom, margin-left

What Is Box Model?

The Box Model is a term used when taking about layout using CSS, basically all HTML can be considered as boxes. CSS Box Model is a box that wraps around every HTML element in your document or design, the box is consists of your actual content then a padding space around it, then a border containing both the padding area and the content, at the end there is a marring area around all. The box model allows designer to place a border around elements and space elements in relation to it. Please refer to the Box Model image attached with this article for a better look over the box model.

Layout Tips - when using Padding and Margins

You most know that Padding adds to your total physical width of your element that you used padding in. So for example, if you had an image with a 40 pixels wide, and you specified a left and right padding of 10 pixels, then you will end up with a new width for this element of 60 pixels. [40 (content) + 10px (left padding) + 10px (right padding) = 60 px]

Also you must know that Margin on the other hand does not directly affect height or width of your element.

That's all you need to know about Box Model and Padding vs. Margin, you can start laying out your design in style using CSS most famous techniques. For more special tips, techniques and CSS tutorials stay tuned for my next lesson on CSS Essentials series.