CSS اندرون مورا
- پچھلے پیج CSS مورا جوڑ
- آئندہ پیج CSS اونچائی/چوڑائی
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
属性指定元素内容区域的宽度。内容区域是元素(盒模型)的内边距、边框和外边距内的部分。
因此,如果元素拥有指定的宽度,则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。
实例
在这里,
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 مورا جوڑ
- آئندہ پیج CSS اونچائی/چوڑائی