CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Height and Width

❮ Previous Next ❯

CSS Height and Width: Sizing Your Elements

The CSS height and width properties are used to define the size of an element. They help control how much space an element occupies on a webpage, ensuring proper layout and design consistency.

These properties can be set using units like pixels (px), percentages (%), or viewport values (vh, vw) to create responsive web designs.

1. Setting Basic Width and Height

The width and height properties in CSS define the exact dimensions of an element. Using percentages allows elements to scale relative to their parent container, while pixels provide a fixed size.

Width and Height Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Width and Height</title>
    <style>
        .dimension-box {
            width: 50%;
            height: 100px;
            border: 3px solid black;
            font-size: 22px;
            font-weight: bold;
            color: navy;
            background-color: lightblue;
            text-align: center;
            padding: 20px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="dimension-box">IntricateDevo Box</div>
</body>
</html>

2. Height and Width of an Image

To set the height and width of an image, the width and height properties are used directly on the <img> tag. This ensures your images fit perfectly within your layout without breaking the page structure.

Image Dimensions Example:

<!DOCTYPE html>
<html>
<head>
    <title>Height and Width of Image</title>
    <style>
        .styled-image {
            width: 250px;
            height: 150px;
            border: 2px solid navy;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h3>Set the Width and Height of an Image</h3>
    <img class="styled-image" src="https://via.placeholder.com/300x174" alt="Placeholder Graphic">
</body>
</html>

3. Controlling Maximum and Minimum Width

These properties control the maximum and minimum width an element is allowed to have, which is critical for Responsive Web Design.

max-width

The max-width property sets the maximum horizontal size of a box. If the browser window is smaller than the max-width, the element shrinks. If the window is larger, the element stops growing at the specified max-width.

Max-Width Example:

<!DOCTYPE html>
<html>
<head>
    <title>Max-Width of Element</title>
    <style>
        .max-box {
            max-width: 500px;
            font-size: 14px;
            border: 2px solid navy;
            padding: 10px;
            background-color: #f4f4f9;
        }
    </style>
</head>
<body>
    <div class="max-box">
        <h3>IntricateDevo</h3>
        <p>
            IntricateDevo is a computer science platform where you can learn programming. It contains well-written, well-thought, and well-explained computer science and programming articles, quizzes, etc. Try resizing your browser to see how I scale!
        </p>
    </div>
</body>
</html>

min-width

The min-width property sets the absolute minimum width of a box. The element will never shrink below this size, even if the browser window becomes narrower, which might cause a horizontal scrollbar.

Min-Width Example:

<!DOCTYPE html>
<html>
<head>
    <title>Min-Width of Element</title>
    <style>
        .min-box {
            min-width: 400px;
            font-size: 14px;
            border: 2px solid navy;
            padding: 10px;
            background-color: #e8eaf6;
        }
    </style>
</head>
<body>
    <div class="min-box">
        <h3>IntricateDevo</h3>
        <p>
            This box will never be narrower than 400px. If you resize your screen to be very small, you will need to scroll horizontally to read all of my text.
        </p>
    </div>
</body>
</html>

4. Controlling Maximum and Minimum Height

Just like width, you can restrict the vertical expansion and contraction of your elements.

max-height

The max-height property is used to set the maximum height of a box. If the content exceeds this height, it will overflow (you can manage this using the overflow property).

Max-Height Example:

<!DOCTYPE html>
<html>
<head>
    <title>Max-Height of Element</title>
    <style>
        .max-height-box {
            max-height: 100px;
            border: 2px solid navy;
            padding: 10px;
            overflow: auto; /* Adds a scrollbar if content exceeds 100px */
        }
    </style>
</head>
<body>
    <div class="max-height-box">
        <h3>IntricateDevo</h3>
        <p>
            IntricateDevo is a computer science platform where you can learn programming. It contains well-written, well-thought, and well-explained computer science and programming articles, quizzes, etc. Because my text is long, you will need to scroll down!
        </p>
    </div>
</body>
</html>

min-height

The min-height property is used to set the minimum height of a box. Even if the box has very little content, it will stretch to meet this vertical requirement.

Min-Height Example:

<!DOCTYPE html>
<html>
<head>
    <title>Min-Height of Element</title>
    <style>
        .min-height-box {
            min-height: 150px;
            border: 2px solid navy;
            padding: 10px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="min-height-box">
        <h3>IntricateDevo</h3>
        <p>
            I have very little text, but my box is still 150px tall!
        </p>
    </div>
</body>
</html>

Summary

Exercise

?

Which CSS property ensures that an element NEVER becomes narrower than a specific size, regardless of how small the browser window gets?

❮ Previous Next ❯