height | width | height and width in css |css max width

The height and width properties in CSS are used to define the dimensions of an element, and specify the height and width of an element respectively. They can be used to set the size of any element, but they are most commonly used to set the size of images, videos, and other embedded media.

code to demonstrate :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>width and height</title>
    <style>
        .widths{
            width: 150px;
            border:2px solid rebeccapurple;
            width: auto; /*used to set auto width of an element*/
            max-width: 100%; 
        }

        .heights
        { color: chartreuse;
          height: 40px;
          border: 3px solid blue;
          /*if the content overflows of the box then we can use the overflow propertiy  */
          overflow: scroll;
          max-height: 500px; /* used to set a maximum height*/
        }
    </style>
  </head>
  <body>
    <!-- WIDTH/// -->
    <p class="widths">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt,
      suscipit?
    </p>

    <!-- HEIGTH -->
    <p class="heights">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus
      molestiae, corporis autem fuga cumque eius!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia voluptas totam, repellat omnis, natus nemo magni mollitia doloribus laboriosam sequi quas deserunt unde commodi impedit tempore? Modi, quibusdam? Sequi, debitis.
    </p>


    </p>
  </body>
</html>

Using these properties, along with their variations like max-height and max-width, allows you to control the size of elements on your web page and create responsive layouts that adapt to different screen sizes.

for more properties, you can visit the link:

https://developer.mozilla.org/en-US/docs/Web/CSS/height

https://developer.mozilla.org/en-US/docs/Web/CSS/width

lt.16: https://hashnode.com/post/clotpm33f00010ajf9bc5cwdn

Height and width in css (lt.17)

Subscribe to my newsletter

himanshu

himanshu