CSS Box Dimensions - Scientech Easy

In this tutorial, we will understand the dimensions of box model in CSS and the various properties that allow you to control the dimensions of an HTML element’s box.

The concept of CSS box model says that every element in an HTML document is represented by a rectangular box, whose dimensions can be controlled by the properties such as width, height, padding, border, and margin.

In CSS, there are several properties that define the dimensions of an HTML element’s box. These properties can take various types of values, such as length units, percentages, auto, and more. Here are the main properties:

1. width: This property sets the width of the content area of the box. For example:

div {
   width: 200px;
}

In this example, the content area of the element’s box will be 200 pixels wide, excluding any padding, border, and margin.

2. height: This property defines or sets the height of the content area of the box. For example:

div {
   height: 150px;
}

In this example, the content area of the element’s box will be 150 pixels height, excluding any padding, border, and margin.

3. line-height: This property defines the height of a line of text like leading in a layout program. For example:

p {
  line-height:1.5;
}

4. min-width: This property sets the minimum width for a box. For example:

div {
    min-width: 100px;
}

In this example, the width of a div element will not be narrower than 100 pixels.

5. min-height: This property sets the minimum height for a box. For example:

div {
   min-height: 50px;
}

In this example, the element’s box will not be shorter than 50 pixels.

6. max-width: This property defines the maximum width for a box. For example:

div {
  max-width: 300px;
}

This example shows that the element’s box will not be wider than 300 pixels.

7. max-height: This property sets the maximum height for a box. For example:

div {
  max-height: 200px;
}

CSS Box Dimensions Example

Here’s a simple example in which we have used all the properties such as width, height, min-width, min-height, max-width, max-height, etc. to define a div element’s box.

Example:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Box Dimension Properties Example</title>
<style>
.box {
   width: 200px;
   height: 150px;
   min-width: 100px;
   min-height: 100px;
   max-width: 300px;
   max-height: 200px;
   background-color: lightblue;
   border: 2px solid blue;
   padding: 20px;
   margin: 20px;
   line-height: 1.5;
   font-size: 16px;
   text-align: center;
}
</style>
</head>
<body>
    <div class="box">
       This box has been specified with dimensions such as width, height, min-width, min-height, etc.
    </div>
</body>
</html>

Output:

In this example, we have used all the CSS properties that control the dimensions of an element box in an HTML document. We have used a width of 200 pixels and a height of 150 pixels for the content area of div element. The div element is set with minimum width and minimum height of 100 pixels that cannot shrink below 100 pixels in width or height due to min-width and min-height.

The width and height of div element cannot also expand beyond 300 pixels in width or 200 pixels in height due to max-width and max-height. The line-height property sets the spacing between lines of text within the element box.

CSS Box Dimensions Example

Related Posts

Trending now