Element Surrounding Strips in CSS

CSS Basics – Part 7

CSS Course

Foreword: In this part of the series, I give you the basics of padding, border and margin areas of an HTML element.

By: Chrysanthus Date Published: 15 Dec 2015

Introduction

This is part 7 of my series, CSS Basics. In this part of the series, I give you the basics of padding, border and margin areas of an HTML element. You should have read the previous parts of the series before coming here, as this is a continuation.

Giving or Changing the Padding Width of an HTML Element
The syntax to give and/or change the four (top, right, bottom, and left) paddings is:

    padding: number

This means that whether or not any padding existed, this syntax would give the element the new padding, with the value (number) typed.

The unit can be px (for pixel) or em or %. If it is %, then it is relative to the width of the containing element that has the element in question. Read and try the following code where the width of the 4 paddings is 75px for the div element:

<!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 property and value for the padding in the above code is:

    padding:75px;

Border
A border can have a width and a style. It can then optionally have a color or optionally have an image.

Border Style
The border style gives the “design” of the border. The diagram (copied from the css3 w3c specification) shows the different border styles and their names.

A style name is what you use as the value to code the style.

Styles and Meaning
none
This means there should be no border. Any color and width coded are ignored.
hidden
This is more or less the same as none.
dotted
This style is a series of round dots.
dashed
This style is a series of square-ended dashes.
solid
This style is a single line segment.
double
This style gives two parallel solid lines with some space between them.
groove
This gives a depression (line segment).
ridge
This gives a swelling out of the screen toward you (line segment).
inset
This style makes the content of the element looks as if it is sunken into the screen.
outset
This style makes the content of the element looks as if it is coming out of the screen (makes it look like a button).

Note: the solid style is the most common.

Border Width
Whether or not an element already has a border width, you can set all the four (top, right bottom and left) border widths to the same value with the following property syntax:

    border-width:value;

The value can be a number in px or em.

Hey, the value can just be the single word: thin or medium or thick. “thin” means a thin border; “medium” means a medium size border and “thick” means a thick border.

Necessary properties for a Border
A border can optionally have a color and other properties. However, any border should have at least two properties, which are the width and style, everything being equal. Read and try the following code, where paragraphs are used as the elements (boxes) in question:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
    <p style="border-width:2px; border-style:dotted">A paragraph with the border dotted style.</p>
    <p style="border-width:2px; border-style:solid">A paragraph with the border solid style.</p>
    <p style="border-width:6px; border-style:groove">A paragraph with the border groove style</p>
</body>
</html>

Note: without color (for the border), the border appears in black and white.

Border Color
A border can have color. Whether or not an element already has a color, you can set all the four (top, right bottom and left) colors to the same value with the following property syntax:

    border-color:colorValue;

The colorValue is the name of the color or the rgb code. Read and try the following program:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
    <p style="border-width:2px; border-style:dotted; border-color:teal">A paragraph with the dotted style border.</p>
    <p style="border-width:2px; border-style:solid; border-color:red">A paragraph with the solid style border.</p>
    <p style="border-width:6px; border-style:groove; border-color:fuchsia">A paragraph with the dotted style border.</p>
</body>
</html>

The border ShortHand Property
Instead of having,

    border-width:2px; border-style:solid; border-color:red

you can have the shorthand property, which is:

    border: 2px solid red

where the components in the value, “2px solid red” are separated by spaces. The components can be in any order. So:

    border: solid 2px red

is the same as,

    border: red solid 2px

So the style attribute for the above paragraph can be written as:

    style="border: solid 2px red"

Giving or Changing the Margin Width of an HTML Element
The syntax to give and/or change the 4 margins is:

    margin: number

The unit can be px (for pixel) or em or %. If it is %, then it is relative to the width of the containing element that has the element in question. Read and try the following code where the width of the 4 margins is 10%:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        div {padding:75px; margin:10%; 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 property and value for the margin in the above code is:

    margin:10%;

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. Whatever is the case, everything being equal, the browser always chooses reasonable values.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Element Surrounding Strips in CSS

CSS Basics – Part 7

CSS Course

Introduction

Related Links

Comments