Lecture 11

 What is box Model?

The box model in CSS is a fundamental concept that describes how elements are structured and displayed on a webpage. It consists of four main components: content, padding, border, and margin.

The content area is where the actual content of the element, such as text or images, is displayed. The padding is the space between the content and the element's border. It provides an internal spacing within the element.

The border is a line that surrounds the content and padding. It can have different styles, colors, and thicknesses. The margin is the space between the border of an element and other elements on the page. It creates an external spacing around the element.

By understanding and manipulating the box model, you can control the size, spacing, and positioning of elements on a webpage using CSS.

How to use Box Model?

To use the box model in CSS, you can set properties like `width`, `height`, `padding`, `border`, and `margin` to control the size, spacing, and appearance of elements.

For example, to set the width and height of an element:

.element {

  width: 200px;

  height: 100px;

}

To add padding around the content of an element:

.element {

  padding: 20px;

}

// To add a border to an element:

.element {

  border: 1px solid black;

}

// To add margin around an element:

.element {

  margin: 10px;

}

By adjusting these properties, you can manipulate the box model to achieve the desired layout and spacing for your elements.

Example:

Then the output will be: