CSS Tutorials

R4R^®

CSS

CSS Examples

How to make margin on page

Sample page template of CSS

CSS Interview Materials

CSS subjective question

CSS Interview question

CSS Objective question

CSS FAQS

Box Model In CSS

Home

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements.In CSS, the term box model is used when talking about design and layout of the HTML webpage;

This consists of three types:

Margin: Clears an area outside the border.The margin represents the distance between the outer edge of the border and any neighboring elements. This is often a source of confusion as it’s easy to think of the margin as a kind of “padding” between elements. Better to think of it like the margin of a page, it represents the outer edge of the object.

Syntax:

margin: <margin-top>
<margin-right>
<margin-bottom>
<margin-left>

Padding: Padding specifies the spacing between the border and any content within the HTML element. If there’s no visible border, then the extent of the padding is effectively the extent of the element. Any background CSS properties associated with the element are displayed within the area defined by the border and padding properties.

Syntax:

padding: <padding-top>
<padding-right>
<padding-bottom>
<padding-left>

Border: The border represents the effective outer limit of the element itself. The border can be either visible or invisible, and has properties for line type, color, and width.A border that goes around the padding and content.
Content: The content of the box, where text and images appear.

Simple Example

<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL { 
background:#666666; 
width:35%;
margin: 12px 12px 12px 12px;
padding: 5px 5px 5px 5px;
}
LI {  
background:red;
margin: 12px 12px 12px 12px ;
padding: 12px 0px 12px 12px;
list-style:none; 
font:Arial, Helvetica, sans-serif; 
color:#000000;
}
LI.withborder {
border-style:solid;
border-width: medium;
border-color:#FFFF00;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="withborder">Element of list is
 a bit longer to illustrate wrapping.</LI>
</UL>
</BODY>
</HTML>