CSS Box Model
The CSS box model is a box that wraps around every HTML element. It consists of content,
padding, borders, and margins.
The following diagram illustrates the box model.
Properties of the Box Model
There are several properties in the CSS box model. They are as mentioned below:
Content
The content area consists of content like images, text, or other forms of media content. The
height and width properties help to modify the box dimensions.
Padding
The padding area is the space around the content area and within the border-box. It can be
applied to all sides of the box or to the specific, selected side(s) - top, right, bottom, and/or left.
Border
, The border area surrounds the padding and the content and can be applied to all the sides of the
box or selected side(s) - top, right, bottom, and/or left.
Margin
The margin area consists of space between the border and the margin. The margin does not
possess its background color and is completely transparent. It shows the background color of the
element, like the body element.
CSS Inheritance
● CSS inheritance is a mechanism where properties are passed from parent elements to
child elements.
● Child elements inherit the styles of their parent elements by default.
● You can override inherited styles by applying styles directly to the child elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inheritance</title>
<style>
body {
font-size: 20px;
color: green;
}
.my-element {
font-size: 30px;
}
</style>
</head>
<body>
The CSS box model is a box that wraps around every HTML element. It consists of content,
padding, borders, and margins.
The following diagram illustrates the box model.
Properties of the Box Model
There are several properties in the CSS box model. They are as mentioned below:
Content
The content area consists of content like images, text, or other forms of media content. The
height and width properties help to modify the box dimensions.
Padding
The padding area is the space around the content area and within the border-box. It can be
applied to all sides of the box or to the specific, selected side(s) - top, right, bottom, and/or left.
Border
, The border area surrounds the padding and the content and can be applied to all the sides of the
box or selected side(s) - top, right, bottom, and/or left.
Margin
The margin area consists of space between the border and the margin. The margin does not
possess its background color and is completely transparent. It shows the background color of the
element, like the body element.
CSS Inheritance
● CSS inheritance is a mechanism where properties are passed from parent elements to
child elements.
● Child elements inherit the styles of their parent elements by default.
● You can override inherited styles by applying styles directly to the child elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inheritance</title>
<style>
body {
font-size: 20px;
color: green;
}
.my-element {
font-size: 30px;
}
</style>
</head>
<body>
