html - Create gap between div and form -

मैं

  & div; div वर्ग = "जानकारी" & gt; & Lt; p & gt; स्थान: & lt; / p & gt; & Lt; p & gt; डोमिनियन थिएटर, डब्ल्यू 1 टी 7 एएयू & lt; / p & gt; & Lt; / div & gt;  

और

  & lt; फ़ॉर्म & gt; & Lt; label & gt; नाम (आवश्यक) & lt; input type = "text" प्लेसहोल्डर = "नाम" आवश्यक & gt; & Lt; / लेबल & gt; & Lt; / प्रपत्र & gt;  

मैं इसे करने के बारे में कैसे जाना होगा मैंने बिना कोई भाग्य के मार्जिन / पैडिंग का उपयोग करने की कोशिश की है?

HTML

  & lt; div class = "bt fbcenter" & gt; & Lt; div वर्ग = "एफबी" & gt; & Lt; div वर्ग = "जानकारी" & gt; & Lt; p & gt; इवेंट आरंभ: & lt; / p & gt; & Lt; p & gt; 25 दिसंबर 2014 1 9: 00 & lt; / p & gt; & Lt; / div & gt; & Lt; div वर्ग = "जानकारी" & gt; & Lt; p & gt; ईवेंट समाप्त: & lt; / p & gt; & Lt; p & gt; 25 दिसंबर 2014 21: 00 & lt; / p & gt; & Lt; / div & gt; & Lt; div वर्ग = "जानकारी" & gt; & Lt; p & gt; स्थान: & lt; / p & gt; & Lt; p & gt; डोमिनियन थिएटर, डब्ल्यू 1 टी 7 एएयू & lt; / p & gt; & Lt; / div & gt; & LT; प्रपत्र & gt; & Lt; label & gt; नाम (आवश्यक) & lt; input type = "text" प्लेसहोल्डर = "नाम" आवश्यक & gt; & Lt; / लेबल & gt; & Lt; / प्रपत्र & gt; & Lt; / div & gt; & Lt; / div & gt;  

सीएसएस

<पूर्व> .बीटी इनपुट {सीमा: 1px ठोस # सीसीसी; रंग: आरजीबी (60, 60, 60); प्रदर्शन क्षेत्र; चौड़ाई: 70%; पैडिंग: 1 एएम; पाठ संरेखित करें: बायां; मार्जिन-नीचे: 2.5 एएम; } .बीटी बटन {चौड़ाई: 100%; पैडिंग: 1.5 एएम; पृष्ठभूमि रंग: # 1f1f1f; रंग: #fff; सीमा: 0; } .बीटी बटन: हॉवर {पृष्ठभूमि-रंग: # 818181; कर्सर: सूचक; } .fbCenter {text-align: center; } .बीटी। एफबी {सीमा: 1 पीएक्स ठोस # 818181; पैडिंग: 2 एएम; रंग: # 585858; प्रदर्शन: इनलाइन-ब्लॉक; पाठ संरेखित करें: बायां; चौड़ाई: 75%; } .fb .info {चौड़ाई: 100%; मार्जिन-नीचे: 1 एएम; }। एफबी पी {फ्लोट: बाएं; } .fb p: nth-of-type (यहां तक ​​कि) {width: 80%; } .fb p: nth-of-type (अजीब) {width: 20%; } .fb p.last {चौड़ाई: 100%; फ़ॉन्ट-वजन: 100; }

।

मार्जिन गिरने और फ्लोट गिरने से अवगत रहें ।

  .fb फॉर्म {मार्जिन टॉप:  
  
  
  
 2em;} .fb। Info {width: 100%; मार्जिन-नीचे: 1 एएम; दोनों को साफ करो; } 
 
 < प्री क्लास = "स्निपेट-कोड-सीएसएस लैंग-सीएसएस टोपेप्रिंट-ओवरराइड">  .fb फॉर्म {मार्जिन-टॉप: 5 एएम}} .बीटी इनपुट {सीमा: 1 पीएक्स ठोस # सीसीसी; रंग: आरजीबी (60, 60, 60); प्रदर्शन क्षेत्र; चौड़ाई: 70%; पैडिंग: 1 एएम; पाठ संरेखित करें: बायां; मार्जिन-नीचे: 2.5 एएम; } .बीटी बटन {चौड़ाई: 100%; पैडिंग: 1.5 एएम; पृष्ठभूमि रंग: # 1f1f1f; रंग: #fff; सीमा: 0; } .बीटी बटन: हॉवर {पृष्ठभूमि-रंग: # 818181; कर्सर: सूचक; } .fbCenter {text-align: center; } .बीटी। एफबी {सीमा: 1 पीएक्स ठोस # 818181; पैडिंग: 2 एएम; रंग: # 585858; प्रदर्शन: इनलाइन-ब्लॉक; पाठ संरेखित करें: बायां; चौड़ाई: 75%; } .fb .info {चौड़ाई: 100%; मार्जिन-नीचे: 1 एएम; दोनों को साफ करो; }। एफबी पी {फ्लोट: बाएं; } .fb p: nth-of-type (यहां तक ​​कि) {width: 80%; } .fb p: nth-of-type (अजीब) {width: 20%; } .fb p.last {चौड़ाई: 100%; फ़ॉन्ट-वजन: 100; }  

  & lt; div class = "bt fbcenter" & gt; & Lt; div वर्ग = "एफबी" & gt; & Lt; div वर्ग = "जानकारी" & gt; & Lt; p & gt; इवेंट आरंभ: & lt; / p & gt; & Lt; p & gt; 25 दिसंबर 2014 1 9: 00 & lt; / p & gt; & Lt; / div & gt; & Lt; div वर्ग = "जानकारी" & gt; & Lt; p & gt; ईवेंट समाप्त: & lt; / p & gt; & Lt; p & gt; 25 दिसंबर 2014 21: 00 & lt; / p & gt; & Lt; / div & gt; & Lt; div वर्ग = "जानकारी" & gt; & Lt; p & gt; स्थान: & lt; / p & gt; & Lt; p & gt; डोमिनियन थिएटर, डब्ल्यू 1 टी 7 एएयू & lt; / p & gt; & Lt; / div & gt; & LT; प्रपत्र & gt; & Lt; label & gt; नाम (आवश्यक) & lt; input type = "text" प्लेसहोल्डर = "नाम" आवश्यक & gt; & Lt; / लेबल & gt; & Lt; / प्रपत्र & gt; & Lt; / div & gt; & Lt; / div & gt;