An Unfinished Symphony

It's about the internet and stuff.

Introduction to the CSS Box Model – part one

All elements on a web page are contained within rectangular boxes with properties that we're able to manipulate directly via the use of CSS. This gives us precise control over their dimensions and, therefore, their impact upon their surroundings. We can set the size of the area used to contain the contents, via the width setting, the width of the borders around the box, the amount of space between the contents and the border, and the amount of space between the borders of one box and those of its neighbours. The precision that's possible to achieve with these settings gives designers a fine degree of control over the layout of the web pages they create.

So what are the settings, and how do we use them?

If we consider that a CSS box is no different to an ordinary cardboard box, with the exact same properties, then it'll be easier to both visualise and understand the settings we use. The cardboard part of a box is identical in properties to the border that surrounds a CSS box, it's the part that surrounds and contains the box's contents. Inside the box is the content area, which in some examples may take up the entire inner area of the box depending on how we pack it. However, sometimes we may want to protect the contents with padding to keep it away from the inner surface of the box. With a cardboard box this may be achieved by padding it with polystyrene, with a CSS box we pad it with empty space. Then, just as with a cardboard box, we may surround it with empty space to keep it away from other boxes – by using a margin. The combined effects of all four of these properties adds up to create the dimensions of a CSS box:

Graphical depiction of the CSS box model

Even the image above is a box that we can manipulate using the CSS box model. It has a width and a height that defines the content area, in this case the size of the image itself. It can be given a border to surround it, and it can have padding between the image and the border, and a margin to surround it all and provide space between it and all of the other objects on this web page. Which brings us to the magic of CSS – and how we manipulate these properties.

In case you aren't familiar with CSS I'll give a very brief rundown of some of the terminology and the syntax involved in creating a CSS style rule. Style rules consist of two principle parts – 1. an element identifier, the selector and 2. the style declaration. Selectors may be the name of the HTML element that is the target, or they may be names given by the designer and targeted via either a unique ID or a class. There are other types of selector, however for the purposes of our exercise we don't need to know anything more about them now. A declaration contains the style properties that are applied to the element targeted by the selector, and consist of two parts separated by a colon (:) and closed by a semi-colon (;) which is used to separate one style declaration from subsequent ones within the same rule set, and each rule set can contain one or more declarations that we contain within curly braces like these {}.

Now we know a little about how we write CSS we can begin to apply that knowledge to setting the dimensions of our image box. To demonstrate this I'll use 3 different examples to target images under different circumstances using the three methods of naming selectors mentioned above.

Example one, targeting all images on the page

If we use the element's name as the selector name, in this case img for image, then our style rules will be applied to every example of that element type on the page unless we subsequently override the rules we create here, or target individual examples more specifically. If you need to review the syntax described above before proceeding then please do so.

  1. img {
  2. width: 210px;
  3. height: 150px;
  4. border: 1px solid black;
  5. padding: 0;
  6. margin: 5px;
  7. }

The above code shows a simple example of a CSS rule set which contains all of the required components mentioned earlier. We begin with our "img" selector which will target all of our images. We then open the declaration block with an opening curly { before proceeding with our declarations. Although I've separated each declaration by placing them on their own lines it's not necessary to do so, but it's helpful when reviewing and editing our rule sets as they're easier to read. The first two declarations relate to the dimensions of the content area within our box, in this case the image dimensions, but it could just as easily have been the dimensions imposed upon a paragraph of text – the same method is used in all cases. We have our width and height properties on the left separated, by a colon, from the property values on the right, and we end the declaration with a semi-colon. So the first box property that we are manipulating is the width, and we're giving the width a value of 210 pixels – the addition of a unit is important with any numerical value greater than zero, in this case we used px to establish that our units are pixels. Property three sets the border around both the contents and padding, and you'll notice that we've given that property several values, these establish the width of the border, its colour and the line type. Later I'll give some examples of other property values that could have been set. We then have property four, the padding. In this example the padding has been set to zero, so that the border is in contact with the image, and you'll note that we haven't specified the unit of measurement – this is because a value of zero is zero regardless of the unit of measurement used, and so it's not necessary to include. Then we added our margin, with a setting of 5 pixels, before closing the rule set with the closing curly }. It's that simple – but it can get slightly more complex as we'll find out shortly.

Example two, targeting groups of images

There may be instances where we need to apply rules to some, but not all, images on a page. If we were to use the element name (img) as our selector name then it wouldn't be possible to do that, and so we have to create a rule set that targets our special class of images whose boxes we wish to manipulate differently to the rest. To do this we use a class. A class in CSS is a name, of our own choosing, that is identified as a class name by having a leading full stop (period), for example .specialimages. The creation of classes in this manner increases the power of CSS a great deal, giving us far more control over the elements on our web pages. Before proceeding review the previous example if you need to as the method of writing our rule set is the same, however we're going to look at how to increase the control over the box properties by manipulating them in an even more precise manner.

  1. .specialimages {
  2. width: 210px;
  3. height: 150px;
  4. border-top: 1px solid black;
  5. border-right: 5px dotted yellow;
  6. border-bottom: 2px dashed #CCCCCC;
  7. border-left: none;
  8. padding: 1px;
  9. margin: 5px;
  10. }

As you can see, this example is clearly more complicated than the previous one and as a result begins to show the follow of including white space by separating the declarations onto individual lines. You should also note that our rule set won't target any images unless we let it know that it needs to – we do this by adding the class name to the image tag within our HTML mark-up by including a class attribute in this format: class="specialimages". That goes within the opening <img> and, as you can see, doesn't include the leading full stop. Besides changing the selector from targeting a HTML element name to using a class we've also broken up the border into its four component sides and set the properties of each individually. Note the order that they appear in, I've specifically used that order in preparation for our final example so that you can familiarise yourself with the sequence. I've also demonstrated a couple of the other possible line types with the dotted and dashed settings on border-right and border-bottom respectively, along with a demonstration of another way of setting the colour, using the hexadecimal code #CCCCCC, and the syntax for setting no border, using none unlike the use of a zero for margins and padding, on border-left. In the final example we'll advance on some of the declarations further as well as demonstrate how to target an ID and discuss the significance of their use.

Example three, targeting a single image

In order to target a single image to the exclusion of all of the others, and also to override any general rules that may have been set via the img selector if necessary, we need to give it a unique ID. Doing so allows us to manipulate individual elements in isolation from other examples of the same element, this gives a tremendous amount of control and is particularly useful when used in conjunction with element positioning. As with the leading full stop present on class selectors IDs also have a special symbol which identifies them as an ID, the hash or pound symbol #. Once again review the previous example before proceeding.

  1. #extraspecialimage {
  2. width: 210px;
  3. height: 150px;
  4. border: 1px solid #000;
  5. padding: 1px;
  6. margin: 5px 2px 10px 3px;
  7. }

Although more advanced than the class example it's possible to make our rule sets less complicated by the use of shorthand on properties that allow it – which all of border, padding and margin allow. In this case I've used shorthand on the margin to condense the property values for each side into one declaration, whereas in the previous example I used multiple declarations for the different border sides. As mentioned in example two the order is of great importance and has a clockwise sequence reading from top to right, to bottom, to left. It's clearly a lot easier to do it that way than it is to create a separate declaration for each side – however separating the border sides into individual declarations is needed to also set the line type and colour, without which the border would be invisible even though it will take up space on the page. Still with the theme of using shorthand, I've also included a shorthand version of the hexadecimal code for black – shortening it from #000000 to #000, this works when the hexadecimal code can be divided into three groups of identical code pairs, for example #ff0033 can be shortened to #f03, but f0cd30 can't be shortened. To finish we need to know how to target our individual image containing box with the unique ID and, as with classes, this is done by including a reference to it within our opening image tag – this time in the form id="extraspecialimage", once again the leading character is dropped in the mark-up.

Hopefully you now have an understanding of what the box model is and how it works, which will hopefully be a better understanding than Internet Explorer versions 5.01 and 5.5 have. Both of these browsers fail to use the CSS box model correctly due to a misinterpretation of the W3C specifications of the CSS version 1 box model. We'll cover this, and how to fix it, in part two.

Up arrow

Comments on 'Introduction to the CSS Box Model – part one'

RSS feed for comments on this post.

gravatar

[…] Already, H has posted some good stuff. Hopefully thats the start of a long blogging career established. […]

gravatar

[…] part one we looked at the CSS box model, how it works, and how we can manipulate it to achieve our design […]

gravatar

[…] I'm hoping it's IE's lousy implementation of the Box Model… because i'm just not clever enough to figure out what else it might be in space of one life. […]

Sorry, the comment form is closed at this time.