CSS – The basics – Box Model

When I’ve helped people in the past to get to grips with HTML & CSS, I’ve often referred to the Box Model.  This is probably the easiest way to understand how HTML and CSS work together.

To quote directly from W3C “Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding.”

The CSS Box Model Firebug displays

The CSS Box Model Firebug displays

This being said, every element in web design is a rectangular box, yes everything.

The maths

The outer dashed line of the box illustrated above represents the margin, which is transparent and does not affect the actual size of the box, however it can affect the position of elements around it.

And this is how you would calculate the box dimensions based on the CSS Box Model:

Width  = width + padding-left + padding-right + border-left + border-right
Height  = height + padding-top + padding-bottom + border-top + border-bottom

Every element has an inherited height and width. Depending on the purpose of the element the default height and width may be all you need. However, if an element is key to the layout and design of a page it may require a specified height and width. In this case it’s best that you override the default values for block level element in question.

Practical consideration

Different Web BrowsersMost browsers released in the last few years have no problem with boxes and render boxes correctly.  However, it’s worth noting that the box model for a long time has never been pixel perfect for ALL browsers and this is one of my pet hates, (“it is what it is for now” I tell myself).

For example, let’s say you don’t declare a width on an element, and the box has static or relative positioning, the width will remain 100% in width and the padding and border will push inwards instead of outward.

But if you explicitly set the width of the box to be 100%, the padding will push the box outward. You’ll come across a difference more so, with text area elements.  To overcome this, many developer simply set specific widths on these elements in order to obtain cross-browser pixel perfect visuals.

Many also use CSS-Reset rules within their CSS files in order to further add to the visual pixel perfection.

Is this as good as it gets?

Actually no, there are so many frameworks and resources out there that are making it easier for developers to create beautiful websites that look the same in most browsers.

And frameworks provide a way to rapidly build a website based on a set of predetermined standards. Depending on the project, frameworks can provide a great starting point or even a complete solution.

However, sometimes, they can also cause more trouble than they’re worth. So research the framework you want to use, look at the pros and cons then decide whether it is worth using it as a base for your web application.

It will get better in the future and like many developers, we wait for the moment when we can cry “Browser Unification!”.

But until then, happy coding.

2 Comments

  1. You can say bye bye to the box model with the css feature of
    box-sizing:border-box;

    https://coderwall.com/p/-jeysw

Leave a Reply

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