Div tag

CSS Box Model

Responsive Website
Div tag

Syntax

<div>...</div

The div tag is used to group HTML elements in a web page

which helps us to make separate sections that have similar
functionality and can be easily styled using Id or class
attributes.
Box Model

img {width: 100%;}

Viewport

the viewport is the visible area of a web page that is

displayed within the browser window.
Responsive Web Design
Responsive Web Design
Responsive Images
Border

Border

{border: solid;} {border-width: 20px;} {border-width: 0px 10px 20px 30px;}

Border

border
the border property adds a border to the element.
Border

border shorthand
border: border-width border-style border-color;
Border

border-width: border-color:
sets the width of the border. sets the color of the border.

The value of the border-width The value of the border-color can be:
can be: px color name, rgb, or hexcode
Border Styles
.solid{
border: 10px solid tomato;
}
.dotted{
border: 10px dotted teal;
}
.dashed{
border: 10px dashed crimson;
}
.double{
border: 10px double seagreen;
}
.groove{
border: 10px groove purple;
}
.ridge{
border: 10px ridge gray;
}
.inset{
border: 10px inset dodgerblue;
}
.outset{
border: 10px outset goldenrod;
}
.radius{
border: 10px solid black;
border-radius: 50px;
}
Border

Note:
To apply border on individual sides you can use the following
properties:
● border-top
● border-right
● border-bottom
● border-left

And to apply border-radius on an element:

● border-radius

border-radius can use px or %

Border

How to add space between the text and the border?

Padding

padding: 50px;
Padding

padding
the padding property sets the padding for an element.

Note:
Padding values are applied clockwise
Padding

1 - value padding: 2 - value padding:

-the value applies the ● first value = top and bottom
padding to all four sides. side
● second value = right and left
Example: side
padding: 10px;

Example:
padding: 10px 20px;
Padding

3 - value padding: 4 - value padding:

● first value = top side ● first value = top side
● second value = right and ● second value = right side
left side ● third value = bottom side
● third value = bottom side ● fourth value = left side

Example:
padding: 10px 20px 30px 40px;
Example:
padding: 10px 20px 30px;
Padding

Note:
padding property is a shorthand.

To apply padding on individual sides you can use the following

properties:

● padding-top
● padding-right
● padding-bottom
● padding-left
Margin

Space
Content 1 Content 2

{margin : 20px;}
Margin

margin
the margin property sets the margin for an element.

Note:
Margin values are applied clockwise
Margin

1 - value margin: 2 - value margin:

-the value applies the margin ●first value = top and bottom
to all four sides. side
● second value = right and left
Example: side
margin: 10px;

Example:
margin: 10px 20px;
Margin

3 - value margin: 4 - value margin:

● first value = top side ● first value = top side
● second value = right and ● second value = right side
left side ● third value = bottom side
● third value = bottom side ● fourth value = left side

Example:
margin: 10px 20px 30px 40px;
Example:
margin: 10px 20px 30px;
Margin

Note:
margin property is a shorthand.

To apply margin on individual sides you can use the following

properties:

● margin-top
● margin-right
● margin-bottom
● margin-left
Box Model
Box Model
Box Sizing

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

The box-sizing property allows us to include the padding

and border in an element's total width and height.
Thank You!