×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
CSS outline Property | set the outline CSS Position property (absolute | relative | static | fixed )
CSS BOX MODEL (How to Design a Div) - CSS 3.0
2603    Arnab De    11/05/2017

CSS BOX Model

To design a layout in HTML with CSS, we use the Box Model of CSS. We consider every element of HTML is a box. In modern webpage design every element should wrap within another box. Every box has the following parts

  • Margins : Transparent area of outside border of the box.
  • Borders : The area placed between padding of content and margin.
  • Padding : Transparent area placed between content and border.
  • Content : This part of the box holds the actual content of the box.
Box Model
Box Model

Example

CSS CODE

div
{
width: 200px;
border: 5px solid red;
padding: 50px;
margin: 10px;
}

softetechnologies

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Box Model Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</div>
<div>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</div>
</body>
</html>

Box Model Demo
Box Model Demo

Width and Height properties of element

We can set the width and height properties of an HTML element using the Width and Height properties of CSS.

Example 1

CSS CODE

div
{
width: 220px;
border: 5px solid red;
padding: 25px;
margin:10px;
}

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Box Model width and Height Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</div>
<img src="12-flower-wallpaper.previewh.jpg" width="300" height="188">
</body>
</html>

Box Width Height
Box Width Height
softetechnologies


Here Actual width of the DIV is


= width + 2 * border + 2 * padding + 2 * margin
= 220 + 2 * 5 + 2 * 25 + 2 * 10
= 220 + 10 + 50 + 20
= 300px

Here the total width of the image and div is same. But due to the margin section this is not reflected properly.


Important: In this case you always ajust the width and height of the content area and calculate the full size of an element.

Example 2

In Example 2 we change only the CSS code.

CSS CODE

div
{
width: 240px;
border: 5px solid red;
 padding: 25px;
margin-bottom:10px;
}

Box Width Height
Box Width Height
CSS outline Property | set the outline CSS Position property (absolute | relative | static | fixed )
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
Don't limit a child to your own learning, for he was born in another time.
Rabindranath Tagore
1363
59.47
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     44336
01/01/2018     36726
25/06/2018     36300
28/06/2017     34765
02/08/2017     33320
01/08/2017     27720
06/07/2017     27482
15/05/2017     27080
14/07/2017     22796
11/09/2018     21441
softetechnologies