Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से एलिमेंट का लेफ्ट पैडिंग निर्दिष्ट करना

परिचय

`padding-left` प्रॉपर्टी एलिमेंट के बाएं पैडिंग (कंटेंट और बॉर्डर के बीच की जगह) सेट करती है।

सिंटैक्स

padding-left: <length> | <percentage>;

मान

  • Length: px, em, rem, pt, cm, आदि (नकारात्मक नहीं)
  • Percentage: कंटेनिंग ब्लॉक की चौड़ाई का प्रतिशत

उदाहरण

<html>
<head>
    <style>
        .demo-box {
            border: 2px solid blue;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <p class="demo-box" style="padding-left: 20px;">
        20px बाएं पैडिंग के साथ डेमो कंटेंट।
    </p>
    
    <p class="demo-box" style="padding-left: 20%;">
        20% बाएं पैडिंग (कंटेनर चौड़ाई के सापेक्ष)।
    </p>
    
    <p class="demo-box" style="padding-left: 2em;">
        2em बाएं पैडिंग (फॉन्ट साइज के सापेक्ष)।
    </p>
</body>
</html>

संबंधित प्रॉपर्टीज

  • `padding-right` - दायां पैडिंग
  • `padding-top` - ऊपर पैडिंग
  • `padding-bottom` - नीचे पैडिंग
  • `padding` - शॉर्टहैंड (ऊपर, दाएं, नीचे, बाएं)

बॉक्स मॉडल संदर्भ

+----------------------------------+
|           Margin                 |
|  +----------------------------+  |
|  |         Border             |  |
|  |  +----------------------+  |  |
|  |  |    Padding-Left      |  |  |  ← padding-left यहां है
|  |  |  +--------------+    |  |  |
|  |  |  |   Content    |    |  |  |
|  |  |  +--------------+    |  |  |
|  |  +----------------------+  |  |
|  +----------------------------+  |
+----------------------------------+
  1. - CSS column-count प्रॉपर्टी से एलिमेंट को कॉलम में विभाजित करें

    CSS column-count प्रॉपर्टी किसी एलिमेंट के कंटेंट को कितने कॉलम (स्तंभों) में विभाजित करना है, यह निर्दिष्ट करती है। यह न्यूजपेपर/मैगजीन स्टाइल लेआउट बनाने के लिए उपयोगी है। उदाहरण नीचे दिए गए उदाहरण में, column-count: 4 का उपयोग करके कंटेंट को 4 कॉलम में विभाजित किया गया है। <!DOCTYPE html>

  1. - CSS में तत्वों में कर्सर का रंग निर्दिष्ट करें

    इनपुट फ़ील्ड या संपादन योग्य क्षेत्र में टेक्स्ट कर्सर (कैरेट) का रंग सेट करने के लिए CSS caret-color प्रॉपर्टी का उपयोग करें। उदाहरण <!DOCTYPE html> <html>    <head>       <style>          .demo {        

  1. CSS से एलिमेंट का आस्पेक्ट रेशियो कैसे मेंटेन करें? CSS से एलिमेंट का आस्पेक्ट रेशियो कैसे मेंटेन करें?

    CSS से एलिमेंट का आस्पेक्ट रेशियो मेंटेन करने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe