CSS Box

Introduction

This is part 4 of my series, Basics of CSS2. Each HTML element such as the DIV, Paragraph and SPAN element, resides in a box. In this part of the series, we look at characteristics of the box and related features.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The Box

The following diagram shows the box:

_______________________________________
   |                                       |
   |           margin (transparent)        |
   |   _________________________________   |
   |  |                                 |  |
   |  |        border                   |  |
   |  |   ___________________________   |  |
   |  |  |                           |  |  |
   |  |  |     padding               |  |  |
   |  |  |   _____________________   |  |  |
   |  |  |  |                     |  |  |  |
   |  |  |  |  content            |  |  |  |
   |  |  |  |_____________________|  |  |  |
   |  |  |___________________________|  |  |
   |  |_________________________________|  |
   |_______________________________________|
|    element width    |
|               box width               |

The above diagram is not drawn to scale. Now, each element has a core content area surrounded with optional padding, border and margin area. So some elements may have borders, while others may not. Some elements may have padding while others may not. Some elements may have margins while others may not.

The content is what you see. With some elements you see the border. The rectangular stripe between the content and the border is the padding area. The border itself is also a rectangular stripe. Surrounding the border is the margin stripe. If the element has a background color or image, you see the color or image in the padding area. You may not see the background color or image through the content portion, unless the content portion has transparent parts. The border (stripe) if present would normally have a color. The margin stripe is always transparent and you can see through it to see the background (color or image) of the HTML BODY element, everything being equal.

The width of the element is the width of the content area. The height of the element is the height of the content area. You can use CSS properties to make the padding and/or border and/or margin present or absent for the element. Any of these three things effectively increases the elements width and height. You can use CSS properties to give the element (content area) a particular width and height. There is more to the dimensions of content area, padding, border and margin. We shall look at that later.

Block-Level and Inline-Level HTML Elements

A block-level HTML element is an element that has an intrinsic line break element in front and after it. Examples of such elements are the DIV and Paragraph elements. An inline-level HTML element does not have any intrinsic line break element in front and after it. Inline-level elements fit themselves just like text in a line and wraps onto the next line. The height of the highest inline element determines the height of the line in which it belongs.

Containing HTML Element

A containing HTML element is an element that can contain other (smaller) HTML elements. A containing element can house other containing elements. Block-Level Elements are containing elements. Since a containing element has an intrinsic line break element in front and after it, it always occupies a complete horizontal stripe in its own containing element (e.g. BODY element) from the left edge of its containing element to the right edge of its containing element.

Note: you can use a CSS property to change a block-level element to an inline-level element and vise-versa.

Note: It is note only block-level elements that have padding, border and margin; inline-level elements also have these properties, but they fit themselves in a line. Inline-level elements and text would fit (mixed) on one line in your HTML document.

Units of Measurement

The content area, padding, border and margin for any element has dimensions. These dimensions have units of measurements. You can measure them with what is called the Pixel, or em or Percentage.

The Pixel

The Pixel abbreviated, px, is the smallest dot that can be displayed on your computer screen. So, if the width of your element (content) is said to be 250px it means the top or bottom edge consists of 250 dots.

The em

This unit is related to what is called the Font (see later).

The Percentage

The Percentage is abbreviated, %. If they say the width of an element is 75%, it means that the width is 75% the width of its containing element. If a Paragraph element is in a DIV element and it is said that its width is 75%, it means that the width is 75% the width of the DIV element. The percentage unit is always relative to some CSS property as the above example illustrates; the CSS property may be that of a different element or the element itself.

Typing the Unit

When typing the unit you use the abbreviation and not the full name. You also do not put a space between the figure and the unit. So you can have something like, 345px or 2em or 65%. Also note that 1px is not the same as 1em which is not the same as 1%.

Let us stop here and continue in the next part of the series.

Chrys