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 |
| 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 |
| 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