Appreciating CSS3 Surrounding Element Features

CSS3 Basics - Part 11

Forward: In this part of the series we have an overview of the padding, border and margin rectangular strips of an element.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 11 of my series, CSS3 Basics. In this part of the series we have an overview of the padding, border and margin rectangular strips of an element. I assume you have read all the preceding tutorials before reaching here. The aim in this tutorial is just to appreciate their existence; the aim is not really to learn how to code them. We shall learn how to code them in the next and later chapters.

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.

Characteristics of an HTML Element
Any html element, whether block-level or inline, is in the form of a box, which we saw in the tutorial, titled, “CSS3 Box”. Normally, after the content area, you have the padding rectangular strip; after that you have the border rectangular strip; after that you have the margin rectangular strip. Every element seen at the browser is in a layer in front of the body element.

The margin of any element is transparent by default (initially); that is, you can look through the margin to see the element (body) behind the margin of the element in question. Of course the margin rectangular strip has a width. The border can have a width, color and style. The padding area can have a width, but cannot have a color of its own and does not have a style. By default (initially), the background color of an element is the background color of the padding area including the inner content; it does not extend to the border. Also, by default (initially) the background image of an element is the background image of the padding area including the inner content; it does not extend to the border.

Look at the body element of a typical web page critically; you would realize that it has a margin rectangular area. It might also have borders, if the web site designer gave it borders (however, this is hardly done for the body element). div elements, paragraph elements, inline elements (e.g. span), and the body element all have padding, border and margin areas (rectangular strips).

With some of the elements, in the default situation, the padding and/or border and/or margin may not be present.

The Padding Area
You will try the following code. The padding area of the div element in the code has been deliberately made big and you will see it at the browser just inside the thin blue border and surrounding the text content. Try the code:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        div {padding:75px; width:50%; border-color:blue; border-style:solid; border-width:2px}
    </style>
</head>
<body>
    <div>
        This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding.
    </div>
</body>
</html>

The Border Area
You will try the following code. The border area of the div element has been deliberately made big and you will see it at the browser in blue. Try the code:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        div {padding:75px; width:50%; border-color:blue; border-style:solid; border-width:100px}
    </style>
</head>
<body>
    <div>
        This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding.
    </div>
</body>
</html>

The Margin Area
You will try the following code. The border area of the div element has been deliberately made big and you will perceive it at the browser; it is transparent. Try the code:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        div {padding:75px; width:50%; border-color:blue; border-style:solid; border-width:100px; margin:100px}
    </style>
</head>
<body>
    <div>
        This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding. This is the DIV element with 75px padding.
    </div>
</body>
</html>

Properties and their values chosen by Browsers
If you do not give a padding and/or border and/or margin value, for any element, the browser chooses one for you. The problem is that the value chosen for a particular property and particular element differs with browsers. Also, you may not know what the browser has chosen for you; for example, the browser might choose zero width for an element. Whatever is the case, everything being equal, the browser always chooses reasonable values.

In this tutorial you have appreciated the existence of padding, border and margin rectangular strips. In the next and following chapters, you will learn how to code them.

That is it, for this part of the series. We continue in the next part.

Chrys

Broad Network

Appreciating CSS3 Surrounding Element Features

CSS3 Basics - Part 11

Introduction

Related Links

Comments