Generating Boxes with CSS

At the heart of web design is the CSS box model, which outlines the rectangular boxes assigned to each document element. This model includes four essential components that determine not only the spatial arrangement of an element, but also its relationship to other elements on the page.

These components are content, padding, border, and margin.

• Content: The content is the actual text, images, or other media contained within an element. The dimensions of the content area are determined by the element's width and height properties.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1234
  div {
  width: 300px;
  height: 200px;
  }

• Padding: Padding is the space between the content and the border of an element. It provides breathing room for the content and can have different values for the top, right, bottom, and left sides. Padding is specified using the padding property and can be set individually using padding-top, padding-right, padding-bottom, and padding-left.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  123
  div {
  padding: 10px 15px 10px 15px;
  }

• Border: The border is the outer edge of an element and surrounds the padding and content. It can have a style (solid, dashed, dotted, etc.), color, and width. Borders are specified using the border property and can be set individually for each side using border-top, border-right, border-bottom, and border-left.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  123
  div {
  border: 2px solid black;
  }

• Margin: The margin is the space outside the border of an element, separating it from other elements on the page. Like padding, it can have different values for the top, right, bottom, and left sides. Margins are specified using the margin property and can be set individually using margin-top, margin-right, margin-bottom, and margin-left.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  123
  div {
  margin: 20px 30px 20px 30px;
  }

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