CSS Height and Width

CSS height

• The CSS height property is used to set the height of an element. It doesn’t include margin, padding, and border.

• The height property has some values like %, em, px, rem, cm, etc.

• When we are giving height to the element, we need to set the parent element to px and the child element to %.

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo totam accusantium dolorum consequatur eligendi, quasi temporibus alias nobis esse eveniet eos consequuntur nemo reiciendis sapiente adipisci, odio enim quia error.
    Esse asperiores provident, iusto facilis similique id totam velit explicabo tenetur tempora doloribus impedit? Distinctio corporis, accusantium non at officia illum tempora necessitatibus officiis, provident ad, quae fugiat earum vero.
    Nesciunt itaque excepturi architecto praesentium facilis? Obcaecati dolor fuga at culpa id voluptates quod quaerat, totam, hic ipsa corporis repellat consectetur possimus tempora delectus consequatur esse aperiam doloribus? Aliquid, fugit.
    Eveniet, eligendi? Numquam enim eius magnam amet. Ut, velit consequatur labore eaque aspernatur cumque, ratione autem temporibus nemo aliquam neque laboriosam quam culpa esse qui ducimus ab, perspiciatis veniam voluptatem.
    Deserunt veritatis, ea labore numquam minima voluptatibus illum sapiente fugit adipisci iusto illo mollitia maxime accusantium quae nam debitis assumenda omnis aperiam quo in rerum cumque? Doloribus earum fugit aspernatur.</p>

p{
    border: 2px solid;
    height: auto;
}

Height with parent and child element

<div>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo totam accusantium dolorum consequatur eligendi, quasi temporibus alias nobis esse eveniet eos consequuntur nemo reiciendis sapiente adipisci, odio enim quia error.
            Esse asperiores provident, iusto facilis similique id totam velit explicabo tenetur tempora doloribus impedit? Distinctio corporis, accusantium non at officia illum tempora necessitatibus officiis, provident ad, quae fugiat earum vero.
            Nesciunt itaque excepturi architecto praesentium facilis? Obcaecati dolor fuga at culpa id voluptates quod quaerat, totam, hic ipsa corporis repellat consectetur possimus tempora delectus consequatur esse aperiam doloribus? Aliquid, fugit.
            Eveniet, eligendi? Numquam enim eius magnam amet. Ut, velit consequatur labore eaque aspernatur cumque, ratione autem temporibus nemo aliquam neque laboriosam quam culpa esse qui ducimus ab, perspiciatis veniam voluptatem.
            Deserunt veritatis, ea labore numquam minima voluptatibus illum sapiente fugit adipisci iusto illo mollitia maxime accusantium quae nam debitis assumenda omnis aperiam quo in rerum cumque? Doloribus earum fugit aspernatur.</p>
    </div>

div{
    border: 2px solid;
    height: 150px;
}
p{
    border: 2px solid red;
    height: 25%;
}

CSS max-height

• The max-height property defines the maximum height of the element. If our content is larger than the maximum height, our content will overflow using the overflow property.

<div>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo totam accusantium dolorum consequatur eligendi, quasi temporibus alias nobis esse eveniet eos consequuntur nemo reiciendis sapiente adipisci, odio enim quia error.
            Esse asperiores provident, iusto facilis similique id totam velit explicabo tenetur tempora doloribus impedit? Distinctio corporis, accusantium non at officia illum tempora necessitatibus officiis, provident ad, quae fugiat earum vero.
            Nesciunt itaque excepturi architecto praesentium facilis? Obcaecati dolor fuga at culpa id voluptates quod quaerat, totam, hic ipsa corporis repellat consectetur possimus tempora delectus consequatur esse aperiam doloribus? Aliquid, fugit.
            Eveniet, eligendi? Numquam enim eius magnam amet. Ut, velit consequatur labore eaque aspernatur cumque, ratione autem temporibus nemo aliquam neque laboriosam quam culpa esse qui ducimus ab, perspiciatis veniam voluptatem.
            Deserunt veritatis, ea labore numquam minima voluptatibus illum sapiente fugit adipisci iusto illo mollitia maxime accusantium quae nam debitis assumenda omnis aperiam quo in rerum cumque? Doloribus earum fugit aspernatur.</p>
    </div>

div{
    border: 2px solid;
    max-height: 80px;
    overflow: auto;
}

CSS min-height

• The min-height property is used to set the minimum height of the element. When the content is smaller or larger, the maximum height property has no effect.

<div>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo totam accusantium dolorum consequatur eligendi, quasi temporibus alias nobis esse eveniet eos consequuntur nemo reiciendis sapiente adipisci, odio enim quia error.
            Esse asperiores provident, iusto facilis similique id totam velit explicabo tenetur tempora doloribus impedit? Distinctio corporis, accusantium non at officia illum tempora necessitatibus officiis, provident ad, quae fugiat earum vero.
            Nesciunt itaque excepturi architecto praesentium facilis? Obcaecati dolor fuga at culpa id voluptates quod quaerat, totam, hic ipsa corporis repellat consectetur possimus tempora delectus consequatur esse aperiam doloribus? Aliquid, fugit.
            Eveniet, eligendi? Numquam enim eius magnam amet. Ut, velit consequatur labore eaque aspernatur cumque, ratione autem temporibus nemo aliquam neque laboriosam quam culpa esse qui ducimus ab, perspiciatis veniam voluptatem.
            Deserunt veritatis, ea labore numquam minima voluptatibus illum sapiente fugit adipisci iusto illo mollitia maxime accusantium quae nam debitis assumenda omnis aperiam quo in rerum cumque? Doloribus earum fugit aspernatur.</p>
    </div>

*{
    margin: 0;
    padding: 0;
}
div{
    border: 2px solid;
    height: auto;
}
p{
    background-color: rgba(0, 255, 255, 0.5);
}

CSS width

• The CSS width property is used to set the width of the element. It doesn’t require margin, padding, and border.

• The width property has some values like %, em, px, rem, cm, etc.

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo totam accusantium dolorum consequatur eligendi, quasi temporibus alias nobis esse eveniet eos consequuntur nemo reiciendis sapiente adipisci, odio enim quia error.
    Esse asperiores provident, iusto facilis similique id totam velit explicabo tenetur tempora doloribus impedit? Distinctio corporis, accusantium non at officia illum tempora necessitatibus officiis, provident ad, quae fugiat earum vero.
    Nesciunt itaque excepturi architecto praesentium facilis? Obcaecati dolor fuga at culpa id voluptates quod quaerat, totam, hic ipsa corporis repellat consectetur possimus tempora delectus consequatur esse aperiam doloribus? Aliquid, fugit.
    Eveniet, eligendi? Numquam enim eius magnam amet. Ut, velit consequatur labore eaque aspernatur cumque, ratione autem temporibus nemo aliquam neque laboriosam quam culpa esse qui ducimus ab, perspiciatis veniam voluptatem.
    Deserunt veritatis, ea labore numquam minima voluptatibus illum sapiente fugit adipisci iusto illo mollitia maxime accusantium quae nam debitis assumenda omnis aperiam quo in rerum cumque? Doloribus earum fugit aspernatur.</p>

p{
    border: 2px solid;
    width: auto;
}

CSS max-width

• The CSS max-width property is used to define the maximum width of an element. If the content is larger than the maximum width, it automatically changes the height of the element. If the content is smaller than the maximum width, there will be no effect.

div{
    border: 2px solid;
    max-width: 1000px;
}

CSS min-width

• The min-width property defines the minimum width of an element. If the content is smaller than the minimum width, the minimum width will be applied, and if the content is larger than the minimum width, the min-width property has no effect.

div{
    border: 2px solid;
    min-width: 100px;
}

Note: You can use this code to see the outputs. Minimize the screen size and check the widths.

---

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥