Tukuntuka CSS Height da Width

kuduwarin din wasanin 100％.

CSS sets height and width

height and width The property is used to set the height and width of the element.

The height and width properties do not include padding, border, or margin. They set the height or width within the padding, border, and margin of the element.

CSS height and width values

height and width The property can be set to the following values:

  • auto - Default. The browser calculates height and width.
  • length - Define height/width with px, cm, etc.
  • % - Define height/width with the percentage of the containing block.
  • initial - Set height/width to the default value.
  • inherit - Inherit height/width from its parent value.

CSS height and width examples

The height of this element is 200 pixels, and the width is 50%

Example

Set the height and width of the <div> element:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Try it yourself

The height of this element is 100 pixels, and the width is 500 pixels.

Example

Set the height and width of another <div> element:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Try it yourself

Note:Remember thatheight and width The property does not include padding, border, or margin! They set the height/width within the padding, border, and margin of the element!

Set max-width

max-width The property is used to set the maximum width of the element.

You can specify max-width (maximum width) using length values (such as px, cm, etc.) or the percentage of the containing block (%), or set it to none (default value. It means there is no maximum width).

When the browser window is smaller than the width of the element (500px), the previous one will occur <div> issue. Then, the browser will add a horizontal scroll bar to the page.

In this case, use max-width Can improve the browser's handling of small windows.

Tip:Drag the browser window to a width less than 500px to see the difference between the two divs!

The height of this element is 100 pixels, and the maximum width is 500 pixels.

The height of this element is 100 pixels, and the maximum width is 500 pixels.

Note:max-width The value of the property will override width(Width).

Example

The height of this <div> element is 100 pixels, and the maximum width is 500 pixels:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Try it yourself

More examples

Set the height and width of an element
This example demonstrates how to set the height and width of different elements.
Set the height and width of an image using percentages
This example demonstrates how to set the height and width of an image using percentage values.
Set the minimum and maximum width of an element
An example demonstrates how to set the minimum and maximum width of an element using pixel values.
تنظیم ارتفاع کمینه و بیشینه عنصر.
این نمونه نشان می‌دهد که چگونه می‌توان ارتفاع کمینه و بیشینه عنصر را با استفاده از مقادیر پیکسلی تنظیم کرد.

تنظیم اندازه CSS

ینا توضیحات
height تنظیم ارتفاع عنصر.
max-height تنظیم ارتفاع بیشینه عنصر.
max-width تنظیم عرض بیشینه عنصر.
min-height تنظیم ارتفاع کمینه عنصر.
min-width تنظیم عرض کمینه عنصر.
width تنظیم عرض عنصر.