CSS3 Box
CSS3 Basics - Part 8
Forward: In this part of the series, we look at characteristics of the box and related features.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
The Box
The diagram (copied from the w3c specification) shows the box.
The 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 strip between the content and the border is the padding area. The border itself is also a rectangular strip. Surrounding the border is the margin strip. 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 (strip) if present can have a color. The margin strip is always transparent and you can look 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.
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.
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
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT