CSS اندرون مورا

ਇਸ ਪ੍ਰਤੀਯੋਗ ਦਾ ਪੈਡਿੰਗ 70px ਹੈ。

CSS اندرون مورا

CSS padding ਪ੍ਰਤੀਯੋਗ ਦੇ ਕਿਸੇ ਵੀ ਨਿਰਧਾਰਿਤ ਸਰਹੱਦ ਅੰਦਰ ਪ੍ਰਤੀਯੋਗ ਦੇ ਸਰੂਪ ਨੂੰ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਚੱਕਰ ਵਿੱਚ ਸਥਾਪਿਤ ਕਰਨ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ

CSS ਰਾਹੀਂ, ਤੁਸੀਂ ਪੈਡਿੰਗ (ਫੁੱਲ) ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਪ੍ਰਤੀਯੋਗ ਦੇ ਹਰ ਪਾਸੇ (ਉੱਪਰ, ਸੱਜੇ, ਨੀਚੇ ਅਤੇ ਸੱਜੇ) ਲਈ ਪੈਡਿੰਗ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ

Padding - ਅਲੱਗ ਅਲੱਗ ਪਾਸੇ

CSS ਦੇਖ ਕੇ ਪ੍ਰਤੀਯੋਗ ਦੇ ਹਰ ਪਾਸੇ ਲਈ ਪੈਡਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

ਸਾਰੇ ਪੈਡਿੰਗ ਪ੍ਰਤੀਯੋਗਾਂ ਨੂੰ ਨਿਮਨ ਮੁੱਲਾਂ ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

  • length - px, pt, cm ਆਦਿ ਇਕਾਈਆਂ ਵਿੱਚ ਪੈਡਿੰਗ ਸੈਟ ਕਰੋ
  • % - ਪੈਡਿੰਗ ਪ੍ਰਤੀਯੋਗ ਨੂੰ ਸਮੇਟੇ ਵਾਲੇ ਪ੍ਰਤੀਯੋਗ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ ਸੈਟ ਕਰੋ
  • inherit - ਪੈਡਿੰਗ ਪ੍ਰਤੀਯੋਗ ਨੂੰ ਮਾਪੇ ਵਾਲੇ ਪ੍ਰਤੀਯੋਗ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ

ਸੁਝਾਅ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

实例

ਦੀ <div> ਐਲੀਮੈਂਟ ਦੇ ਚਾਰ ਪਾਸੇ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਪੈਡਿੰਗ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

亲自试一试

Padding - ਛੋਟੀ ਵਿਸ਼ੇਸ਼ਤਾ

ਕੋਡ ਘਟਾਉਣ ਲਈ, ਸਾਰੇ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਇੱਕ ਪ੍ਰਤੀਯੋਗ ਵਿੱਚ ਸਪੱਸ਼ਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

padding 属性是以下各内边距属性的简写属性:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

工作原理是这样的:

如果 padding 属性有四个值:

  • padding: 25px 50px 75px 100px;
    • 上内边距是 25px
    • 右内边距是 50px
    • 下内边距是 75px
    • 左内边距是 100px

实例

使用设置了四个值的 padding 简写属性:

div {
  padding: 25px 50px 75px 100px;
}

亲自试一试

如果 padding 属性设置了三个值:

  • padding: 25px 50px 75px;
    • 上内边距是 25px
    • 右和左内边距是 50px
    • 下内边距是 75px

实例

使用设置了三个值的 padding 简写属性:

div {
  padding: 25px 50px 75px;
}

亲自试一试

如果 padding 属性设置了两个值:

  • padding: 25px 50px;
    • 上和下内边距是 25px
    • 右和左内边距是 50px

实例

使用设置了两个值的 padding 简写属性:

div {
  padding: 25px 50px;
}

亲自试一试

如果 padding 属性设置了一个值:

  • padding: 25px;
    • 所有四个内边距都是 25px

实例

使用设置了一个值的 padding 简写属性:

div {
  padding: 25px;
}

亲自试一试

内边距和元素宽度

CSS width 属性指定元素内容区域的宽度。内容区域是元素(盒模型)的内边距、边框和外边距内的部分。

因此,如果元素拥有指定的宽度,则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

实例

在这里,

元素的宽度为 300px。但是,
元素的实际宽度将是 350px(300px + 左内边距 25px + 右内边距 25px):

div {
  width: 300px;
  padding: 25px;
}

亲自试一试

若要将宽度保持为 300px,无论填充量如何,那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距,则可用的内容空间会减少。

实例

使用 box-sizing 属性将宽度保持为 300px,无论填充量如何:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

亲自试一试

更多实例

设置左内边距
本例演示如何设置

元素的左内边距。

设置右内边距
本例演示如何设置

元素的右内边距。

设置上内边距
本例演示如何设置

元素的上内边距。

设置下内边距
本例演示如何设置

元素的下内边距。

所有 CSS 内边距属性

属性 描述
padding 用于在一条声明中设置所有内边距属性的简写属性。
padding-bottom ਸਿਫਟ ਐਲੀਮੈਂਟ ਦੇ ਨੀਚੇ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਨੂੰ ਸੈਟ ਕਰੋ。
padding-left ਸਿਫਟ ਐਲੀਮੈਂਟ ਦੇ ਖੱਬੇ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਨੂੰ ਸੈਟ ਕਰੋ。
padding-right عنصر کی دکھائی کی اندر پیڈنگ کو سیٹ کرنا
padding-top عنصر کی اونچائی کی اندر پیڈنگ کو سیٹ کرنا

بڑی خواندگی

课外书:بیکس ماڈل: CSS اندر پیڈنگ