❮ Previous

CSS Height & Width

  • Learn CSS height and width to control element size using fixed, relative, and responsive values.

  • What Are Height & Width in CSS ?

    In CSS, height and width are used to control the size of an HTML element.

    • Width → how wide an element is 

    • Height → how tall an element is 

    In simple words:
    Height & width decide how much space an element occupies on the screen.

    Every box you see on a webpage—div, card, image, or section—depends on height and width.

    Why Do We Use Height & Width ?

    Control Element Size 

    Height & width help you:

    Create boxes

    Design cards
     Build layouts
     Control images & buttons

Importance of Height & Width in CSS

height and width control the size of elements, helping you create boxes, design layouts, and manage images or buttons. 

.box {
  width: 200px;
  height: 100px;
}

  • Creates a fixed-size box

    Real-Life Example:
    Choosing the size of a photo frame

    Create Structured Layouts 

    Without height & width:
     Layout becomes unpredictable

    With height & width:
     Consistent design
     Better alignment

    Real-Life Example:
    Shelves in a cupboard are built with fixed width and height

    Units Used for Height & Width 

    CSS offers multiple units to define size.

    px (Pixels) 

    What is px ?
    px is an absolute unit.

    Fixed size
    Does not change with screen size

Pixel (px) Unit in CSS

px is an absolute unit that sets a fixed size and does not change based on screen size. 

.box {
  width: 300px;
  height: 150px;
}

  • Same size on all screens

    Real-Life Example:
    Measuring with a ruler

    Drawbacks

    • Not responsive

    • Can break layouts on small screens

      % (Percentage) 

      What is % ?
      Percentage is relative to the parent element.

    Percentage (%) Unit in CSS

    % is a relative unit that sets the size based on the parent element’s dimensions. 

    .parent {
  width: 400px;
}
.child {
  width: 50%;
}

    • Child width = 200px

      Real-Life Example
      Half of a pizza always depends on the full pizza.

      Important Rule:
      Percentage height works only if the parent height is defined.

      vh & vw (Viewport Units) 

      What are viewport units ? 

      • 1vw = 1% of viewport width

      • 1vh = 1% of viewport height

    Viewport Units (vh & vw)

    vh and vw are viewport units where 1vh equals 1% of the viewport height and 1vw equals 1% of the viewport width. 

    .hero {
  width: 100vw;
  height: 100vh;  
}

    • Full-screen section

      Real-Life Example:
      TV screen size relative to your view.

      Best Used For:

      • Hero sections

      • Landing pages

      • Full-screen layouts

        Why Height Sometimes Doesn’t Work

        Problem: Parent Height Not Defined

      Percentage Height Issue

      height: 50% does not work unless the parent element has a defined height. 

      .child {
  height: 50%;
}

      • No effect

        Correct Way

      Correct Use of Percentage Height

      Percentage height works properly when the parent element has a defined height. 

      .parent {
  height: 400px;
}
.child {
  height: 50%;
}

      • Child height = 200px

        Real-Life Example:
        You can’t say “half of something” if the total size is unknown

        Auto Height & Content-Based Sizing

        By default:

      Auto Height in CSS

      height: auto; allows an element’s height to adjust automatically based on its content. 

      div {
  height: auto;
}

      • Height adjusts automatically based on content

        Real-Life Example:
        A bag grows as you put more items inside

        min-width, max-width, min-height, max-height

        These properties set limits on size.

      Min & Max Size Properties

      min-width, max-width, min-height, and max-height set size limits to control how small or large an element can grow. 

      .box {
  width: 80%;
  max-width: 500px;
}

      • Responsive
        Controlled layout

        Real-Life Example:
        Elastic belt that stretches but has a limit.

        Height & Width with Images

      Responsive Images with Height & Width

      Setting width: 100%; and height: auto; makes an image responsive while keeping its aspect ratio. 

      img {
  width: 100%;
  height: auto;
}

      • Image scales properly
        No distortion

        Real-Life Example:
        Resizing a photo without stretching faces

        Height, Width & Box Model 

        By default:

        Width & height apply to the content area only
        Padding & border increase the total size

      Height & Width Practical Example

      This example shows how percentage width and height work inside a parent container with a defined size. 

      <!DOCTYPE html>
<html>
<head>
    <title>Height & Width Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .container {
            width: 80%;
            height: 300px;
            border: 2px solid black;
        }

        .box {
            width: 50%;
            height: 50%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box</div>
    </div>
</body>
</html>

      • What Happens ?

        Container has fixed height
        Box takes half the container
        Layout behaves correctly

        Common Mistakes

        Using percentage height without parent height
        Overusing px everywhere
        Ignoring responsive units
        Forgetting the box model

        Best Practices for Height & Width

        Use %, vh, vw for responsiveness
        Define parent height when needed
        Use max-width to control layout
        Avoid fixed heights unless required
        Always use box-sizing: border-box

        • Width = how wide

        • Height = how tall 

        • Parent size matters

        • Responsive units are better

        • Balance control + flexibility = great design

          Height & width control element size
          px, %, vh, vw are commonly used
          Percentage height needs parent height
          Viewport units are perfect for full-screen sections
          Understanding sizing is essential for layouts

        ❮ Previous