سی ایس ایس اونچائی او ر چوڑائی

ਇਸ ਤੱਤ ਦੀ ਚੌੜਾਈ 100% ਹੈ।

CSS 设置高度和宽度

height ਅਤੇ width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

CSS 高度和宽度值

height ਅਤੇ width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

CSS 高度和宽度实例

此元素的高度为 200 像素，宽度为 50％

ਉਦਾਹਰਣ

ਪੱਖੇ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਇਹ ਪੱਖੇ ਦੀ ਉਚਾਈ 100 ਪਿਕਸਲ ਅਤੇ ਚੌੜਾਈ 500 ਪਿਕਸਲ ਹੈ。

ਉਦਾਹਰਣ

ਇੱਕ ਹੋਰ <div> ਪੱਖੇ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:ਯਾਦ ਰੱਖੋheight ਅਤੇ width ਪ੍ਰਤੀਸ਼ਤਾ ਪ੍ਰਤੀਸ਼ਤਾ ਪੱਖੇ ਦੀ ਮਹੱਤਮ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਪ੍ਰਤੀਸ਼ਤਾ ਪ੍ਰਤੀਸ਼ਤਾ ਪੱਖੇ ਦੀ ਮਹੱਤਮ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਪ੍ਰਤੀਸ਼ਤਾ ਪ੍ਰਤੀਸ਼ਤਾ ਪੱਖੇ ਦੀ ਮਹੱਤਮ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਪ੍ਰਤੀਸ਼ਤਾ ਪ੍ਰਤੀਸ਼ਤਾ ਪੱਖੇ ਦੀ ਮਹੱਤਮ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ

ਸੈਟ ਕਰੋ max-width

max-width ਪ੍ਰਤੀਸ਼ਤਾ ਪ੍ਰਤੀਸ਼ਤਾ ਪੱਖੇ ਦੀ ਮਹੱਤਮ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ。

max-width (ਮਹੱਤਮ ਚੌੜਾਈ) ਨੂੰ ਲੰਬਾਈ ਕੀਮਤ (ਉਦਾਹਰਣ ਵਜੋਂ px, cm ਆਦਿ) ਜਾਂ ਬਲਾਕ ਦੀ ਪ੍ਰਤੀਸ਼ਤ ਕੀਮਤ (% ਵਜੋਂ) ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜਾਂ ਇਸ ਨੂੰ none (ਮੂਲ ਮੁੱਲ) ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਅਰਥਾਤ ਕੋਈ ਮਹੱਤਮ ਚੌੜਾਈ ਨਹੀਂ ਹੈ)。

ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦੀ ਚੌੜਾਈ ਪੱਖੇ ਦੀ ਚੌੜਾਈ (500 ਪਿਕਸਲ) ਤੋਂ ਘੱਟ ਹੋਣ ਤੇ ਇਸ ਪ੍ਰਕਾਰ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਹੋਵੇਗਾ <div> ਦੇ ਪ੍ਰਸ਼ਨ ਦਾ ਸਮਾਧਾਨ ਦੇਣ ਲਈ ਇਸਤੇਮਾਲ ਕਰੋ। ਤਦ ਬਰਾਉਜ਼ਰ ਪੱਚੇ ਸਰਕਰਾ ਜੋੜੇਗਾ。

ਇਸ ਸਥਿਤੀ ਵਿੱਚ max-width ਬਰਾਉਜ਼ਰ ਨੂੰ ਛੋਟੇ ਵਿੰਡੋਜ਼ ਵਿੱਚ ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ。

ਸੁਝਾਅ:ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਨੂੰ 500 ਪਿਕਸਲ ਤੋਂ ਘੱਟ ਚੌੜਾਈ ਵਾਲੇ ਹੋਣ ਤੇ ਦੋ ਵੱਖ ਪੱਖੇ ਦਰਮਿਆਨ ਫਰਕ ਦੇਖਣ ਲਈ ਸਰਕਰਾ ਲਾਓ!

ਇਹ ਪੱਖੇ ਦੀ ਉਚਾਈ 100 ਪਿਕਸਲ ਅਤੇ ਮਹੱਤਮ ਚੌੜਾਈ 500 ਪਿਕਸਲ ਹੈ。

ਇਹ ਪੱਖੇ ਦੀ ਉਚਾਈ 100 ਪਿਕਸਲ ਅਤੇ ਮਹੱਤਮ ਚੌੜਾਈ 500 ਪਿਕਸਲ ਹੈ。

ਟਿੱਪਣੀ:max-width ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਕੀਮਤ ਨਾਲ ਉਪਰੋਕਤ ਨੂੰ ਪਾਰ ਕਰ ਦਿੰਦੀ ਹੈ width（ਚੌੜਾਈ）。

ਉਦਾਹਰਣ

ਇਹ <div> ਪੱਖੇ ਦੀ ਉਚਾਈ 100 ਪਿਕਸਲ ਅਤੇ ਮਹੱਤਮ ਚੌੜਾਈ 500 ਪਿਕਸਲ ਹੈ:

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਹੋਰ ਉਦਾਹਰਣ

ਇਲੈਕਟ੍ਰੌਨਿਕ ਪੱਖੇ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਸੈਟ ਕਰਨਾ
ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਵੱਖ-ਵੱਖ ਇਲੈਕਟ੍ਰੌਨਿਕ ਪੱਖੇ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਸੈਟ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ。
ਪ੍ਰਤੀਸ਼ਤ ਕੀਮਤ ਨਾਲ ਚਿੱਤਰ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਸੈਟ ਕਰਨਾ
ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਸ਼ਤ ਕੀਮਤ ਨਾਲ ਚਿੱਤਰ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਸੈਟ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ。
ਇਲੈਕਟ੍ਰੌਨਿਕ ਪੱਖੇ ਦਾ ਨਿਊਨਤਮ ਅਤੇ ਮਹੱਤਮ ਚੌੜਾਈ ਸੈਟ ਕਰਨਾ
ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਪਿਕਸਲ ਕੀਮਤ ਨਾਲ ਇਲੈਕਟ੍ਰੌਨਿਕ ਪੱਖੇ ਦਾ ਨਿਊਨਤਮ ਅਤੇ ਮਹੱਤਮ ਚੌੜਾਈ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
ایک عنصر کی سماجی اونچائی اور سب سے زیادہ اونچائی سیٹ کرنا
یہ مثال، پیسو میں نمبر سیٹ کرکے عنصر کی سماجی اونچائی اور سب سے زیادہ اونچائی سیٹ کرنا دکھاتا ہے。

CSS میں سائز حصوں سیٹ کرنا

حصہ وصف
height ایک عنصر کی اونچائی سیٹ کرنا
max-height ایک عنصر کی سب سے زیادہ اونچائی سیٹ کرنا
max-width ایک عنصر کی سب سے زیادہ چوڑائی سیٹ کرنا
min-height ایک عنصر کی سماجی اونچائی سیٹ کرنا
min-width ایک عنصر کی سماجی چوڑائی سیٹ کرنا
width ایک عنصر کی چوڑائی سیٹ کرنا