The Fundamental Concept in Web design and Layout of CSS Box Model.

Categories - CSS Tags - CSS   Maniruzzaman Akash   4 weeks ago   79   2 minutes   0

The CSS box model is a fundamental concept in web design and layout. It describes how elements on a web page are rendered and how their content, padding, border, and margin interact. Here’s an example of the CSS box model:


<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid #333;
      margin: 30px;
    }
	
  </style>
</head>
<body>
  <div class="box">
    Content
  </div>
</body>
</html>
Screenshot-2023-11-08-152933 In this example, we have a `
` element with a class of "box." Let's break down the different components of the CSS box model for this element:

Content:

  • The content area is the actual content inside the element, in this case, the text “Content.”

Padding:

  • The padding is the space between the content and the border. In the CSS for the .box class, we have specified padding: 20px, so there is 20 pixels of space between the content and the border on all sides.

Border:

  • The border surrounds the padding and content. We’ve set the border to 5px solid #333, which means it’s a 5-pixel wide solid border with a color of #333 (dark gray).

Margin:

  • The margin is the space outside the border. In our example, we’ve set a margin of 30px, so there is 30 pixels of space between the border of the .box and any adjacent elements or the edge of the containing element.

The total space taken up by the box is the sum of the content area, padding, border, and margin. So, in this example, the box takes up:

  • Width: 200px (content) + 2 * 20px (horizontal padding) + 2 * 5px (horizontal border) + 2 * 30px (horizontal margin) = 320px
  • Height: 100px (content) + 2 * 20px (vertical padding) + 2 * 5px (vertical border) + 2 * 30px (vertical margin) = 160px This example illustrates how the CSS box model works and how you can control the size and spacing of elements on a web page using the content, padding, border, and margin properties.
Previous
How To Work CSS Border - border, border-radius
Next
CSS Colors - Valid Color text,Keyword Colors, Hexadecimal, RGB, HSL,HSLA Colors