How to modify box models in HTML?

edit

Box models in HTML can be modified by changing the values of CSS properties that control the content, padding, border, and margin of the box.

1. Content: To modify the content area of a box model, use the CSS property "width" and "height" to set the dimension of the box. For example:

.box {
  width: 300px;
  height: 200px;
}

1. Padding: To modify the padding area around the content, use the CSS property "padding". For example:

.box {
  padding: 20px;
}

1. Border: To modify the border around the box, use the CSS property "border" with values for "width", "style", and "color". For example:

.box {
  border: 2px solid black;
}

1. Margin: To modify the space around the box outside of the border, use the CSS property "margin". For example:

.box {
  margin: 20px;
}

By adjusting these properties, you can modify the appearance and layout of box models in HTML to suit your design needs.