CSS3 Padding and Margin Coding

CSS3 Basics - Part 12

Forward: In this part of the series we see how to code padding and margin strips in CSS3.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 12 of my series, CSS3 Basics. In this part of the series we see how to code padding and margin strips in CSS3. I hope you have read all the preceding tutorials before reaching here. In website design, you usually do not touch the padding and margin rectangular trips of an element, when coding. However, when you have to touch any of them, the only thing you can do is to change the width of the padding strip or the width of the margin strip.

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.

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 and units

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

The unit can be px (for pixel) 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;

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

    margin: number and units

The unit can be px (for pixel) 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% for the div element:

<!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%;

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

Chrys

Broad Network

CSS3 Padding and Margin Coding

CSS3 Basics - Part 12

Introduction

Related Links

Comments