بکس ماڈل: سی ایس ایس کا پیدائش
- پائیدھ پچھلای پیج سی ایس ایل فیملائی نمونہ
- پائیدھ دوسرا پیج سی ایس ایل بوردر
عنصر کا پیدائش کا فاصلہ بوردر اور مواد کی علاقے کے درمیان ہوتا ہے۔ اس علاقے کو کنٹرول کرنے والی سادہ ترین خاصیت پیدائش کی خاصیت ہے۔
CSS padding 属性定义元素边框与元素内容之间的空白区域。
سی ایس ایس پیدنگ اٹری بیوٹ
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
ਤੁਸੀਂ ਹੁਣ ਸੋਚਿਆ ਹੋਵੇਗਾ, ਨਿਚਲੇ ਨਿਯਮ ਨਾਲ ਉੱਪਰੋਕਤ ਸ਼ਾਰਟਨਾਮ ਨਿਯਮ ਦਾ ਪ੍ਰਭਾਵ ਇੱਕੋ ਜਿਹਾ ਹੈ:
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ
ਪਹਿਲਾਂ ਜ਼ਿਕਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਲਾਕੇ ਦੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਨੂੰ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਪੈਰੈਂਟ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦੇ width ਨਾਲ ਹੀ ਹੈ, ਇਹ ਵੀ ਬਾਹਰੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਨਾਲ ਇੱਕੋ ਜਿਹਾ ਹੈ। ਇਸ ਲਈ ਜੇਕਰ ਪੈਰੈਂਟ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦਾ width ਬਦਲ ਜਾਵੇਗਾ, ਤਾਂ ਇਹ ਵੀ ਬਦਲ ਜਾਵੇਗਾ。
ਇਹ ਨਿਯਮ ਪੈਰਾਗ੍ਰਾਫ ਦੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਨੂੰ ਪੈਰੈਂਟ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦੇ width ਦੇ 10% ਸੈਟ ਕਰਦਾ ਹੈ:
p {padding: 10%;}
ਉਦਾਹਰਣ ਵਜੋਂ: ਜੇਕਰ ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ ਦਾ ਪੈਰੈਂਟ ਇੰਦਰਿਆਂ ਮੂਰਤੀ div ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਹੈ, ਤਾਂ ਇਸ ਦੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦੀ ਗਿਣਤੀ div ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦੇ width ਨਾਲ ਹੀ ਹੋਵੇਗੀ。
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>
ਧਿਆਨ:ਸਰਕਾਰੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਅਤੇ ਪਿੱਛੇ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਇੱਕੋ ਜਿਹੇ ਹਨ; ਯਾਨੀ ਸਰਕਾਰੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦਾ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਪੈਰੈਂਟ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਦੇ ਚੌਡਾਈ ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾਵੇਗਾ, ਨਹੀਂ ਕਿ ਉੱਚਾਈ ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾਵੇਗਾ。
CSS ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਪ੍ਰਤੀਯੋਗਿਤਾ:
- ਸਾਰੇ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਪ੍ਰਤੀਯੋਗਿਤਾ ਇੱਕ ਬਿਆਨ ਵਿੱਚ
- ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਸ਼ਾਰਟਨਾਮ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸਾਰੇ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਇੱਕ ਬਿਆਨ ਵਿੱਚ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਇੱਕ ਤੋਂ ਚਾਰ ਮੁੱਲ ਹੋ ਸਕਦੇ ਹਨ。
- ਨਿਚਲੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ 1 ਸੈਟ ਕੀਤੀ ਜਾਵੇ
- ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਸੈਂਟੀਮੀਟਰ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੈਲਿਊਟ ਦੇ ਨਿਚਲੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
- ਨਿਚਲੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ 2 ਸੈਟ ਕੀਤੀ ਜਾਵੇ
- ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੈਲਿਊਟ ਦੇ ਨਿਚਲੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
- ਸਾਥੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ 1 ਸੈਟ ਕੀਤੀ ਜਾਵੇ
- ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਸੈਂਟੀਮੀਟਰ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੈਲਿਊਟ ਦੇ ਸਾਥੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
- ਸਾਥੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ 2 ਸੈਟ ਕੀਤੀ ਜਾਵੇ
- ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੈਲਿਊਟ ਦੇ ਸਾਥੀ ਇੰਦਰਿਆਂ ਮੂਰਤੀ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
- راست اینر مارگن سیٹ 1
- یہ مثال دکھاتا ہے کہ کیسے سینٹی میٹر کی کا رسیو کا استعمال کردیئے جاتا ہے تاکہ سلائی کی راست اینر مارگن سیٹ کی جائے۔
- راست اینر مارگن سیٹ 2
- یہ مثال دکھاتا ہے کہ کیسے فیصد کی کا رسیو کا استعمال کردیئے جاتا ہے تاکہ سلائی کی راست اینر مارگن سیٹ کی جائے۔
- اُپر اینر مارگن سیٹ 1
- یہ مثال دکھاتا ہے کہ کیسے سینٹی میٹر کی کا رسیو کا استعمال کردیئے جاتا ہے تاکہ سلائی کی اُپر اینر مارگن سیٹ کی جائے۔
- اُپر اینر مارگن سیٹ 2
- یہ مثال دکھاتا ہے کہ کیسے فیصد کی کا رسیو کا استعمال کردیئے جاتا ہے تاکہ سلائی کی اُپر اینر مارگن سیٹ کی جائے۔
سی ایس ایل اینر مارگن اٹری بیوٹ
| اٹری بیوٹ | وصف |
|---|---|
| پیدنگ | مختصر اٹری بیوٹ، جو ایک دفعے میں عنصر کی تمام اینر مارگن اٹری بیوٹز سیٹ کرتا ہے۔ |
| پیدنگ نیچل | عنصر کی نیچل اینر مارگن سیٹ کرنا۔ |
| پیدنگ چوپائی | عنصر کی چوپائی اینر مارگن سیٹ کرنا۔ |
| پیدنگ راست | عنصر کی راست اینر مارگن سیٹ کرنا۔ |
| پیدنگ توب | عنصر کی اُپر اینر مارگن سیٹ کرنا۔ |
- پائیدھ پچھلای پیج سی ایس ایل فیملائی نمونہ
- پائیدھ دوسرا پیج سی ایس ایل بوردر
