Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Understanding the box-model

Sunday, October 13th, 2013 by Servage

According to the box model, every element in a document generates a box to which properties such as width, height, padding, borders, and margins can be applied. You probably already have a feel for how element boxes work, from adding backgrounds to elements. This chapter covers all the box-related properties.

Specifying Box Dimensions

By default, the width and height of a block element is calculated automatically by the browser (thus the default auto value). It will be as wide as the browser window or other containing block element, and as tall as necessary to fit the content. However, you can use the width and height properties to make the content area of an element a specific width or height.
CSS3 provides two ways to specify the size of an element. The default method— introduced way back in CSS1—applies the width and height values to the content box. That means that the resulting size of the element will be the dimensions you specify plus the amount of padding and borders that have been added to the element. The other method—introduced as part of the new box-sizing property in CSS3—applies the width and height values to the border box, which includes the content, padding, and border. With this method, the resulting visible element box, including padding and borders, will be exactly the dimensions you specify. Some find this a more intuitive method for sizing. We are going to get familiar with both methods in this section.

 box-sizing
 Values: content-box | border-box
 Default: content-box
 Applies to: all elements
 Inherits: no
 width
 Values: length measurement | percentage | auto | inherit
 Default: auto
 Applies to: block-level elements and replaced inline elements (such as images)
 Inherits: no
 height
 Values: length measurement | percentage | auto | inherit
 Default: auto
 Applies to: block-level elements and replaced inline elements (such as images)
 Inherits: no

Padding
Padding is the space between the content area and the border (or the place the border would be if one isn’t specified). I find it helpful to add padding to elements when using a background color or a border. It gives the content a little breathing room, and prevents the border or edge of the background from bumping right up against the text.
You can add padding to the individual sides of any element (block-level or inline). There is also a shorthand padding property that lets you add padding on all sides at once.

 Values: length measurement | percentage | inherit
 Default: 0
 Applies to: all elements except table-row, table-row group, table-header-group, table-footer-group, table-column, and
 table-column-group
 Inherits: no
 padding
 Values: length measurement | percentage | inherit
 Default: 0
 Applies to: all elements
 Inherits: no

 Borders

A border is simply a line drawn around the content area and its (optional) padding. You can choose from eight border styles and make them any width and colour you like. You can apply the border all around the element or just a particular side or sides.

 border-top-style, border-right-style,
 border-bottom-style, border-left-style
 Values: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
 Default: none
 Applies to: all elements
 Inherits: no

Margins
The last remaining component of the element box is its margin, which is an optional amount of space that you can add on the outside of the border. Margins keep elements from bumping into one another or the edge of the browser window. You can even use margins to make space for another column of content.

 margin-top, margin-right, margin-bottom, margin-left
 Values: length measurement | percentage | auto | inherit
 Default: auto
 Applies to: all elements
 Inherits: no
 margin
 Values: length measurement | percentage | auto | inherit
 Default: auto
 Applies to: all elements except elements with table display types other than table-caption, table, and inline-table
 Inherits: no
Understanding the box-model, 4.8 out of 5 based on 4 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.