Box Model

Lecture 54:- Box Model

The box model in CSS refers to the rectangular boxes that are generated for each HTML element on a web page. Each box consists of four parts: content, padding, border, and margin.

1. Content: This is the area inside the box where the element's content is displayed.
2. Padding: This is the area between the content and the border. You can control the size of the padding using the padding property in CSS.
3. Border: This is a line that surrounds the content and padding. You can control the appearance of the border using the border property in CSS.
4. Margin: This is the area outside the border, and separates the box from other elements on the page. You can control the size of the margin using the margin property in CSS.

Here's an example to show the box model:

cssCopy code

div {  width: 300px;  height: 200px;  padding: 20px;  border: 10px solid black;  margin: 30px; }

In this example, the div element will have a content area that is 260px wide and 160px tall, a 20px padding, a 10px solid black border, and a 30px margin.