CSS Width and Height

In CSS, width and height are used to set the size of an HTML element such as a div, img, or input field.

The width property sets the width of an element, while the height property sets the height. Here's an example of how to use them:

div {
    width: 300px;
    height: 200px;
  }

In the above code, the div element has been set to a width of 300px and a height of 200px. This means that the div element will be 300px wide and 200px tall on the web page.

You can use different units of measurement for the width and height properties, such as pixels, ems, or percentages. Here's an example using percentages:

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

In this code, the img element has been set to a width of 50%. This means that the image will take up 50% of the width of its parent container. The height property has been set to auto, which means that the height of the image will be automatically adjusted to maintain its aspect ratio.

It's important to note that if an element's content is larger than its set width or height, it will overflow and may cause issues with the layout of the web page. To prevent this, you can use the overflow property to specify how the overflow should be handled. For example:

div {
    width: 200px;
    height: 100px;
    overflow: hidden;
  }

In this code, the div element has been set to a width of 200px and a height of 100px. The overflow property has been set to hidden, which means that any content that overflows the element will be hidden and not visible on the web page.

CSS width values

Remember that these are just a few examples of the different width values you can use in CSS, and there are many more. The choice of which value to use will depend on your specific needs and the layout of your web page.