The Box Model

Understanding the “box model” is central to all CSS-based layouts.

The main principle of the box model is that everything is contained within a box.

The box model is made up of six basic properties:

  • Content: The text, images, multimedia, etc.  included inside of the box.
  • Width & Height: The contained element’s width and height in pixels.
  • Padding:  The space between the element’s border and the content. This property does not allow negative values and does not affect the distance of elements from one another. When setting this property you can specify the same padding for all four sides of the element or set different padding properties for the top, bottom, left and right sides of the element.
  • Border: The line around the padding.
  • Margin: The space between the content and the box’s edge. When setting this property you can specify negative values and also the same margin for all four sides of the element or different margin properties for the top, bottom, left and right sides.
  • Background: The color or image that makes up the background of the box.

Box Model Video

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s