HTML: Using CSS to assign padding, margins and borders

Introduction

CSS provides many properties for formatting your HTML document. In previous articles you learned to apply fonts and colours to elements. In this article you will learn CSS formatting properties that allow you to set an element’s padding, margin and borders. You will also learn CSS formatting properties for setting an element’s height and width.

Understanding an element’s padding, margin and borders is straightforward. An element is composed of its opening tag, closing tag, and all content in between the two tags. The box model refers to picturing all elements visually as a box that contains content and padding, and has borders and margins.

Padding is the space between a box’s content and its border. A border is an invisible, or visible, line around the box. The margin is the space between a box’s border and the margin of an adjacent box or between the box’s border and its parent’s border minus its parent’s padding.

Width, min-width, max-width, height, min-height and maxheight are all box properties. In order to understand these properties, you need to understand block-level elements. An inline element is an element displayed in the same line as other content. In-line elements may contain other in-line elements but not block-level elements. A block-level element is displayed on a new line. Block-level elements are intended to hold both other block-level elements and in-line elements. Only block level elements can have a width, height, min-width, min-height, max-width or max-height specified.

CSS Advanced

Setting element padding

You can set an element’s internal padding using the CSS padding property. The amount of space between an element’s content and border is the element’s padding. For example,

p {padding: 5px;}

assigns a 5-pixel padding between the paragraph’s text and border.

When setting padding, you can specify the top, bottom, left and right padding individually as separate declarations:

p{padding-top:2px;paddingbottom:3px;padding-left:3px;paddingright:4px;}

in one declaration:

p{padding: 2px 3px 3px 4px;}

or, if the values are all the same, you can set all four properties using one value:

p{padding:4px;}

Setting element margins

Margins are the spaces between elements. A margin is the space around an element’s border. It’s a cushion around an element’s border that no other elements may pass. For instance, if two elements had a 5-pixel margin, the space between them would be 10 pixels.

Elements have right, left, top and bottom margins. You can set the margins separately or together in one declaration. A margin’s width can be a length, a percentage or auto. As with other elements, length is a fixed measurement and percentage refers to the margin’s parent element. Auto lets the browser determine the best margin.

Setting element borders

Elements have borders. Even if you don’t specify a border, it’s still there. The border separates an element’s padding from its margin. You have many options when setting an element’s border. You can specify a border’s colour, style and width. You can specify an element’s right, left, top and bottom border properties separately, or in one statement. You can also specify each side’s border in one statement.

Valid border colours are any valid colour name, RGB colour value or hexadecimal value. Valid width values are thin, medium, thick or a length. Valid styles are none, hidden, dotted, dashed, solid, double, groove, ridge, inset or outset.

Written by Sourabh Bhunje

Sourabh Bhunje, B.E. IT from Pune University. Currently Working at Techliebe. Professional Skills: Programming - Software & Mobile, Web & Graphic Design, Localization, Content Writing, Sub-Titling etc. http://techliebe.com/about-us

Leave a Comment