CSS Box Model

The box model allows us to add a border around elements, and to define space between elements. It has four different parts:

Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent

CSS Margin Properties	CSS Padding Properties
margin-top	padding-top
margin-right	padding-right
margin-bottom	padding-bottom
margin-left	padding-left
margin(shorthand to all 4 sides)	padding(shorthand to all 4 sides)

All the margin and padding properties can have the following values:

auto – the browser calculates the margin
length – specifies a margin in px, pt, cm, etc.
% – specifies a margin in % of the width of the containing element
inherit – specifies that the margin should be inherited from the parent element

Shorthand Syntax for margin and padding

The margin shorthand property can take one to four values:

One value: Applies to all four sides.

div {
margin: 20px; /* Applies 20px margin to all sides */
}

2. Two values: The first value applies to the top and bottom, the second value applies to the left and right.

div {
padding: 10px 15px; /* 10px top and bottom, 15px left and right */
}

3. Three values: The first value applies to the top, the second to the left and right, and the third to the bottom.

div {
margin: 10px 15px 20px; /* 10px top, 15px left and right, 20px bottom */
}

4. Four values: The values apply to the top, right, bottom, and left respectively (clockwise).

div {
padding: 10px 15px 20px 25px; /* 10px top, 15px right, 20px bottom, 25px left */
}

CSS border Property

The CSS border
properties allow you to specify the style, width, and color of an element’s
border.

Here’s a detailed table
of all CSS border properties, including explanations and examples:

Property	Description	Example
Border	Shorthand property to set border-width, border-style, and border-color in one declaration.	border: 2px solid black;
border-width	Specifies the width of the border. Can be set using specific values or keywords like thin, medium, thick.	border-width: 4px; border-width: thin thick medium;
border-style	Specifies the style of the border. Possible values include none, solid, dotted, dashed, double, groove, ridge, inset, outset, and hidden.	border-style: solid; border-style: dotted dashed double;
border-color	Specifies the color of the border. Can be defined using color names, HEX, RGB, or HSL values.	border-color: blue; border-color: #FF5733;
border-top	Sets the width, style, and color of the top border.	border-top: 3px solid red;
border-right	Sets the width, style, and color of the right border.	border-right: 2px dashed green;
border-bottom	Sets the width, style, and color of the bottom border.	border-bottom: 4px double blue;
border-left	Sets the width, style, and color of the left border.	border-left: 5px groove black;
border-radius	Rounds the corners of an element’s border box. Can be applied to all corners at once or individually.	border-radius: 10px; border-top-left-radius: 10px;
border-image	Uses an image as the border. Includes properties to specify the image, slice, width, and repeat.	border-image: url(border.png) 30 stretch;
border-collapse	Specifies whether table borders should collapse into a single border or be separated. Only applies to <table> elements.	border-collapse: collapse;
border-spacing	Specifies the distance between borders of adjacent cells in a table when border-collapse is separate.	border-spacing: 10px;

EXAMPLE TO SHOW BOX MODEL

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Box Property Example</title>
<style>
/* Container for the boxes */
.container {
display: flex;
justify-content: space-around;
background-color: #f0f0f0;
border: 2px dotted purple;
}

/* Basic box styling */
.box {
width: 150px;
height: 150px;
background-color: lightblue;
border: 2px solid blue;
box-sizing: border-box; /* Ensures padding and border are included in width/height */
}

/* Box with different margin */
.box-margin {
margin: 30px;
background-color: lightgreen;
}

/* Box with different padding */
.box-padding {
padding: 40px;
background-color: lightcoral;
}

/* Box with different border */
.box-border {
border: 5px dashed purple;
background-color: lightyellow;
}

/* Box with different width and height */
.box-size {
width: 200px;
height: 100px;
background-color: lightgray;
}
</style>
</head>
<body>
<h3>CSS Box Property Example</h3>
<div class=”container”>

<!– Basic Box –>
<div class=”box”>Box 1</div>

<!– Box with larger margin –>
<div class=”box box-margin”>Box 2</div>

<!– Box with larger padding –>
<div class=”box box-padding”>Box 3</div>

<!– Box with different border style –>
<div class=”box box-border”>Box 4</div>

<!– Box with different size –>
<div class=”box box-size”>Box 5</div>

</div>
</body>
</html>

OUTPUT

Box Property Example

CSS Box Property Example

Box 1

Box 2

Box 3

Box 4

Box 5