CSS Box Model :
The CSS box model is a container that contains multiple properties including borders, margins, padding, and the content itself. It is used to create the design and layout of web pages.
The 2 types of box model in CSS:
⇒There are two types of boxes in CSS — inline boxes and block boxes. Further, each of the two has an outer and inner display type.
Box-Model has multiple properties in CSS. Some of them are given below:
»content:
This contains the actual data in the form of text, images, or other media forms and it can be sized using the width & height property.
»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 setting the style, color, and width of the border.
»margin:
This property is used to create space around the element
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main {
font-size: 32px;
font-weight: bold;
text-align: center;
}
#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">Gocources</div>
</body>
</html>
Output:
