Div tag
CSS Box Mode
Responsive Websitel
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!
