[CSS] Box Model

Every element in HTML is considered a “box“. The box model describes how margins, paddings, and borders work with elements.

 

1. Box Model

  • margin : the area outside of the element
  • border : the outer edge of any padding
  • padding : just around the content and inherits the background color of the content

Note that margins, borders, and paddings can be set specifically for “left“, “right“, “top“, and “bottom“.

 

2. Margins

  • margin-left
  • margin-top
  • margin-right
  • margin-bottom

You can use the shorthand syntax:

  • margin : <all>
  • margin : <top-bottom> <right-left>
  • margin : <top> <right-left> <bottom>
  • margin : <top> <right> <bottom> <left>
#div1 { margin-top:5px; margin-right:10px; margin-bottom:20px; margin-left:20px; }
#div2 { margin:10px; }
#div3 { margin:5px 20px; }

 

3. Paddings

You can specify paddings work such like margins.

  • padding-left
  • padding-top
  • padding-right
  • padding-bottom

The shorthand syntax is:

  • padding : <all>
  • padding : <top-bottom> <right-left>
  • padding : <top> <right-left> <bottom>
  • padding : <top> <right> <bottom> <left>
#div1 { padding-top:5px; padding-right:10px; padding-bottom:20px; padding-left:20px; }
#div2 { padding:10px; }
#div3 { padding:5px 20px; }

 

4. Borders

Borders require three pieces of information

  • border-style : none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset
  • border-color
  • border-width

border: <border-width> <border-style> <border-color>

#div1 { border-top:2px groove Red; border-bottom:3px dashed Blue; }
#div2 { border:10px inset Green; }

 

5. Width and Height

The tricky part of the box model is how “width” and “height” work with margins or paddings. Suppose you specify the height as “250px”. Does it include the margin or not? How about the border?

Let’s test it.

#div1 { width:300px; height:200px; background-color:Red; margin:0px; padding:0px; }
#div2 { width:300px; height:200px; background-color:Blue; border:20px solid Yellow; }
#div3 { width:300px; height:200px; background-color:Green; margin:50px; padding:50px; }

If you look at the result, paddings and margins (even borders) increase the size. The “width” and “height” is just for the content area.

 

6. box-sizing

The “box-sizing” property changes the way how certain elements to fit an area.

  • content-box : “width” and “height” are just for content; padding and borders are added outside the specified width and height (default)
  • border-box : padding and borders are drawn inside of the specified width and height
#div1 { box-sizing:border-box; width:300px; height:200px; background-color:Red; margin:0px; padding:0px; }
#div2 { box-sizing:border-box; width:300px; height:200px; background-color:Blue; border:20px solid Yellow; }
#div3 { box-sizing:border-box; width:300px; height:200px; background-color:Green; margin:50px; padding:50px; }

Margins are still outside of elements, which, I think, makes sense.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s