CSS Box model(Border, Padding, Margin)
The CSS box model is a container that contains multiple properties including borders, margin, padding. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below:
padding: This property is used to create space around the element, inside any defined border.
border: This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
margin: This property is used to create space around the element ie., around the border area.
Border
Css border properties allow us to set the style, color, and width of the border. different properties can be set for all the different borders i.e left border, top border, right border, bottom border.
properties of CSS Borders:
Border Style
border-top
border-right
border-bottom
border-left
Border Width
border-top
border-right
border-bottom
border-left
Border Color
border-top
border-right
border-bottom
border-left
In border style property specifies the type of border following are the types of borders:
dotted- It describes a dotted border
dashed- It describes a dashed border
solid- It describes a solid border
double- It describes a double border
groove- It describes a 3D grooved border
ridge- It describes a 3D ridged border
inset- It describes a 3D inset border
outset- It describes a 3D outset border
none- It describes no border
hidden- It describes the hidden border
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>
output:
Border Width:
Border width sets the width of the border. The width of the border can be in px, pt, cm or thin, medium and thick. Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-width:15px;
}
</style>
</head>
<body>
<p><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
output:
Border color:
This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-color:#0000ff;
}
p.two
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff #fa00ff;
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
output:
Padding
CSS paddings are used to create space around the element, inside any defined border. We can set different paddings for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.
Padding properties can have the following values:
Length in cm, px, pt, etc.
Width % of the element.
The padding can be used to specify the padding for each side of an element in the following order:
padding-top: It is used to set the width of the padding area on the top of an element.
padding-right: It is used to set the width of the padding area on the right of an element.
padding-bottom: It is used to set the height of the padding area on the bottom of an element.
padding-left: It is used to set the width of the padding area on the left of an element.
Margin
CSS margins are used to create space around the element. We can set the different sizes of margins for individual sides(top, right, bottom, left).
Margin properties can have the following values:
Length in cm, px, pt, etc. Width % of the element.
The margin property is a having the following individual margin properties:
margin-top: It is used to set the top margin of an element.
margin-right: It is used to set the right margin of an element.
margin-bottom: It is used to specify the amount of margin to be used on the bottom of an element.
margin-left: It is used to set the width of the margin on the left of the desired element.
