Element Sizing in CSS

Natural (Intrinsic) Size of Elements

HTML elements have a natural size, also called intrinsic size, before being modified by CSS.

Think of an image, for example. It has a width and height defined in its file — its intrinsic size.

If you insert an image into an HTML document without modifying its dimensions via CSS, it will display at its original size.

In the example below, we placed an image inside a container to highlight its file size:

🔧 Example: Image with Intrinsic Size

<div class="container">
  <img src="images/star.jpg" alt="Star">
</div>

.container {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border: 5px solid navy;
}

img {
  border: 5px solid darkblue;
  max-width: 100%;
  height: auto;
}

The image is placed inside a <div> without its own dimensions, to which we assigned the class container and a 5px border.

If we remove the image from the container, its border will "collapse" and we will only see a thick line stretched across the full width of the browser window — because <div> is a block-level element.

The container's border is visible only because the image inside "pushes" its edges with its intrinsic size.

🔧 Example: Container Without Content

<div class="container">
  <!--<img src="images/star.jpg" alt="Star">-->
</div>

.container {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border: 5px solid navy;
}

img {
  border: 5px solid darkblue;
  max-width: 100%;
  height: auto;
}

Setting a Specific Size

We can assign a specific size to elements that make up the layout we are building.

When an element has defined dimensions and the content fits perfectly within those dimensions, we are talking about extrinsic size.

As we saw in the previous example, an empty <div> has no width or height. However, once we set explicit dimensions, the element will respect these values, whether it has content or not. Here's an example:

🔧 Example: Empty div with set dimensions

<div>800 × 250</div>

div {
  width: 800px;
  height: 250px;
  margin: 0 auto;
  background-color: #fff;
  border: 5px solid navy;
  color: #000;
  text-align: center;
  line-height: 250px;
  font-family: system-ui, sans-serif;
  font-size: 1.2rem;
}

As we observed in the previous lesson, the content of an element with a fixed height can "overflow" outside the container. To prevent this behavior, it is important to carefully choose the measurement units — either absolute lengths (px, em) or relative units (%, vh, vw) — depending on the context.

Using Percentages

In many situations, percentages act as length units and can be used interchangeably with fixed values. But what kind of percentages are we talking about?

If we have a "parent" box that contains a "child" box, and we set the width of the latter in percentages, those percentages represent a portion of the "parent" box's size.

🔧 Example: Using Percentages

<div class="box">
  I have a width of 50%.
</div>

.box {
  border: 5px solid tomato;
  width: 50%;
  background-color: #fff;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  text-align: center;
}

If we hadn't set a width for the element in the example above, it — being a block-level element — would have occupied the entire horizontal space available.

Paddings and Margins in Percentages

When we assign percentages to the padding and margin properties, we can observe unexpected behavior.

In the example below, we assigned a box a padding of 10% and a margin of 10% on all four sides:

🔧 Example: Padding and Margin in Percentages

<div class="container">
  <div class="box">
    I have a padding and margin of 10% on all sides.
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  background-color: #f9f9f9;
  padding: 2rem;
}

.box {
  border: 5px solid darkblue;
  width: 300px;
  margin: 10%;
  padding: 10%;
  background-color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  text-align: center;
}

You might expect the top and bottom margins to represent 10% of the box's height, and the side margins 10% of the box's width.

Well, that's not the case! In CSS, percentage values for padding and margin are calculated based on the width of the parent element, not the height. Therefore, all 10% values are relative to the width of the container — that is, the viewport width if there is no other parent with explicit dimensions.

Minimum and Maximum Dimensions

In addition to fixed dimensions, we can instruct CSS to assign elements a minimum or maximum size.

This is useful when we have a box without fixed content. By setting a minimum height, the box will always be at least that tall, but if there is more content and available space, it will adjust and grow accordingly.

In the example below, you can see two boxes, both with a minimum height of 150px. The box on the left has 150px height, while the one on the right contains content that requires more space, so it will expand beyond the minimum value:

🔧 Example: Minimum Height

<div class="container">
  <div class="box"></div>
  <div class="box">
    These boxes have a minimum height set, but this box contains content that requires more space, so it will not adhere to the initial height and will grow to accommodate all content. <br>
    These boxes have a minimum height set, but this box contains content that requires more space, so it will not adhere to the initial height and will grow to accommodate all content. <br>
    These boxes have a minimum height set, but this box contains content that requires more space, so it will not adhere to the initial height and will grow to accommodate all content.
  </div>
</div>

.container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}

.box {
  border: 5px solid tomato;
  min-height: 150px;
  width: 200px;
  margin: 1rem;
  background-color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  padding: 1rem;
}

As you can already guess, the behavior of an element adjusting its height to the content is useful to prevent content overflow.

Regarding the maximum width (max-width), it is often used to make images shrink if there is not enough space to display them at their intrinsic size. This way, we ensure that images will not become larger than the set maximum width.

For example, if we set an image's width to 100%, and its intrinsic width is smaller than the container's width, the image will be scaled automatically and may become pixelated.

If the image's intrinsic width is larger than the container's width, it will overflow the container.

Neither of these situations is ideal.

Instead, if we use max-width: 100%;, the image can be scaled down smaller than its intrinsic size, but it will not exceed 100% of the container's width.

In the example below, we used the same image three times:

For the first image, we set the width to 100% and placed it in a container larger than its intrinsic size. The image will stretch to the edges of the container.
For the second image, we used max-width: 100%;, so it will not stretch fully to the container's edges.
For the third image, we also used max-width: 100%;, but placed it in a smaller container, so it will shrink to fit inside the container.

🔧 Example: Images with Minimum and Maximum Sizes

<div class="container">
  <div class="box"><img src="images/star.jpg" alt="star" class="width"></div>
  <div class="box"><img src="images/star.jpg" alt="star" class="max"></div>
  <div class="minibox"><img src="images/star.jpg" alt="star" class="max"></div>
</div>

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 1rem;
}

.box, .minibox {
  border: 5px solid darkblue;
  background-color: #fff;
  padding: 0.5rem;
}

.box {
  width: 350px;
}

.minibox {
  width: 50px;
}

.width {
  width: 100%;
}

.max {
  max-width: 100%;
  height: auto;
  display: block;
}

These techniques are frequently used to make images adapt automatically, so that when viewed on smaller devices, they are scaled appropriately (proportionally reduced).

However, you should avoid using this technique when uploading very large images and shrinking them directly in the browser.

It is recommended to reduce the image sizes in a graphic editor to avoid excessive scaling in the browser.

Downloading overly large images can significantly slow down the website.

Viewport Units

The viewport is the visible area of the page you are currently viewing in your browser — and of course, it has its own size.

The CSS units that refer to the viewport size are vw (for width) and vh (for height).

Using these units, we can size elements relative to the user's device display.

As you already know from the "Values and Units" section, 1vh represents 1% of the viewport height, and 1vw represents 1% of the viewport width. We can use these units to size boxes as well as text.

In the example below, we have a box with dimensions 20vh and 20vw, containing the letter “B” with a font size of 15vh:

🔧 Example: vh-vw Units

<div class="container">
  <div class="box">B</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  border: 5px solid navy;
  width: 20vw;
  height: 20vh;
  font-size: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  font-family: system-ui, sans-serif;
}

In the example above, if we change the vh and vw values, we will see how the size of the box and the font changes. This also happens if we resize the browser window — both horizontally and vertically. Try resizing the window to see the behavior of the box and its content.

Relative sizing to the viewport of HTML elements is extremely useful in web design.

For example, if you want users to see a “full hero” page (a section that occupies the entire screen) when they access your site, you can size that section using height: 100vh;. The rest of the content will only be visible through scrolling, being pushed outside the viewport.

In fact, this is a technique frequently used by designers, called above the fold, which refers to the portion of a web page visible immediately after loading.

🔧 Example: Fullscreen Section

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example fullscreen section</title>
</head>
<body>  

<div class="a">
  <a href="#" class="logo">Logo</a>
  <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
  </ul>
  <h1>Above the fold</h1>
  <p>The first section of the site</p>
</div>

<div class="b">
  <h1>Below the fold</h1>
  <h2>Second section</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  text-align: center;
  font-family: "sans-serif";
  font-size: 3.5vw;
}

.logo {
  position: absolute;
  left: 40px;
  top: 40px;
  color: #fff;
  text-decoration: none;
}

ul {
  position: absolute;
  display: flex;
  right: 40px;
  top: 40px;
  list-style: none;
}

ul li {
  padding: .2rem 1rem;
  margin: 0 1rem;
  background-color: #fff;
  border-radius: 8px;
}

ul li a {
  text-decoration: none;
  color: tomato;
}

h2 {
  padding-bottom: 2rem;
}

.a {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/vwa.jpg") center/cover;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.b {
  background: #aadd66;
  padding: 15vh 2vh;
}

Recap and Best Practices

In this lesson, we explored methods for sizing HTML elements with CSS. Below is a summary of key concepts, along with simple examples and modern recommendations:

Intrinsic Size

Elements such as images have natural dimensions defined in the source file. If not styled, they will display at their original size.

Example:

img {
  border: 2px solid navy;
  max-width: 100%;
  height: auto;
}

Use max-width: 100% so that the image does not exceed its container.

Specific Sizes

You can set fixed or fluid dimensions. For responsive layouts, avoid rigid values.

Example:

.box {
  width: clamp(300px, 50%, 600px);
  height: 200px;
}

clamp() provides flexibility: between 300px and 600px, but prefers 50%.

Percentages

Percentages are relative to the parent's size. They are useful for fluid widths.

Example:

.child {
  width: 60%;
}

If the parent is 800px, the child will be 480px.

Padding and Margins in Percentages

Percentages for padding and margin are calculated based on the container's width.

Example:

.box {
  padding: 10%;
  margin: 5%;
}

Even padding-top will be 10% of the width, not the height.

Minimum and Maximum Sizes

Use min-width and max-width to control element scaling.

Example:

.image {
  width: 100%;
  max-width: 500px;
}

The image will shrink on small screens but will not exceed 500px.

Viewport Units

vw and vh are useful for full-screen layouts or scalable fonts.

Example:

.hero {
  height: 100vh;
  font-size: 5vw;
}

The section will occupy the full screen, and the text will scale with the viewport width.

Bonus: Modern CSS Functions

Use min(), max(), and clamp() for fluid control.

Example:

.card {
  width: min(90%, 600px);
}

The card will have a maximum of 600px, but no more than 90% of the container.

Final Tips

Use relative units (%, vw, rem) for adaptable design.
Test element behavior with variable content.
Optimize images before loading — do not just shrink them with CSS.
Combine min, max, and clamp for robust layouts.

🧠 Quiz – CSS Element Sizing

CSS media ➔