HtmlCssMonk

Box Model In CSS | Learn Basic CSS

code, html, internet

DESCRIPTION

CSS box model is a container which can be used as a toolkit for customizing the layout of different elements. It contains multiple properties including borders, margin, padding and the content itself. Every HTML elements can be considered as a box with multiple layers.

Box Model typically consist of 4 parts –

  1. Margin
  2. Border
  3. Padding
  4. Content

Brief Explanation of every part –

Content – This area consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and content-box height. It often has a background color or background image.

Padding – This area is actually the space around the content area and within the border box. Its dimensions are given by padding-box width and padding-box height.

Border – It is the area between the box’s padding and margin. Its dimensions are given by border-box width and border-box height.

Margin  This area consists of space outside the border. The dimensions of Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors. Margin area is always transparent.


Box-Model Properties

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Example –

<!DOCTYPE html>

<head>
  <title>CSS Box Model</title>
  <style>
    
    .hcm {
      margin-left: 60px;
      border: 50px solid #5a5d5a;
      width: 300px;
      height: 200px;
      text-align: center;
      padding: 50px;
    }

    .hcm1 {
      font-size: 42px;
      font-weight: bold;
      color: #1f201f;
      margin-top: 60px;
      background-color: #c5c5db;
    }

    
  </style>
</head>

<body>

  <div class="hcm">
    <div class="hcm1">HtmlCssMonk</div>
    
  </div>
</body>

</html>

This Code will produce the following result on your webpage –


Next topic – Paddings in CSS

Previous topic – Selectors in CSS


Leave a Comment

Your email address will not be published. Required fields are marked *