CSS Height And With

❮ Prev Next ❯

In Cascading Style Sheets (CSS), height and width properties are fundamental for defining the size of elements on a webpage. These properties play a crucial role in shaping the layout and appearance of web content. Let's delve deeper into how height and width work in CSS, exploring their syntax, usage, and considerations.

Height Property

The height property determines the vertical dimension of an element, specifying how tall it should be. It sets the height of the content area of an element, excluding padding, border, and margin.

Syntax: 

selector {
  height :value;
}

Example: 

.container {
  height :200px;
}

In this example, the class ".container" is set to have a height of 200 pixels.

Width Property

Similarly, the width property controls the horizontal dimension of an element, defining its width. It sets the width of the content area of an element, excluding padding, border, and margin.

Syntax: 

selector {
  width :value;
}

Example: 

.container {
  width :300px;
}

In this example, the class ".container" is set to have a width of 300 pixels.

Using Absolute and Relative Values

  • Absolute Values: These are fixed units like pixels (px), inches (in), centimeters (cm), etc. Absolute values provide precise control over element size.
  • Relative Values: Relative units such as percentages (%) or viewport units (vw, vh) offer flexibility. Percentages are relative to the parent element's size, while viewport units are relative to the viewport size. 
.container {
  width :50%;/* Relative to parent element */
  height :100vh;/* Relative to viewport height */
}

In this code snippet, the width is set to 50%of the parent element's width, and the height is set to cover 100% of the viewport height.

Box Sizing

The box-sizing property influences how the total width and height of an element are calculated. By default, the width and height properties only include the content area. However, setting box-sizing to "border-box" includes padding and border in the calculation. 

.container {
  width :300px;
  height :200px;
  box-sixing :border-box;
  padding :20px;
  border:1px solid #000;
}

Here, the container includes padding and border in its total width and height calculation due to the border-box value of the box-sizing property.

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        .container-one{
          width :300px;
          height :200px;
          box-sizing :border-box;
          padding :20px;
          border:1px solid #000;
        }
        .container-two{
          width :300px;
          height :200px;
          padding :20px;
          border:1px solid #000;
        }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <h3>welcome to Coding Koleji </h3>
      <div class="container-one">With Box-sixe Property</div>
      <div class="container-two">Without Box-sixe Property</div>
    </body>
  </html>

Mastering height and width properties in CSS empowers developers to craft responsive and visually appealing layouts. Whether using absolute or relative values, understanding these properties' intricacies allows for effective control over element dimensions, contributing to an optimal user experience.

❮ Prev Next ❯