html - element following emty inline-block div has strange padding at top -
इस सवाल का पहले से ही एक उत्तर है: < / P>
- 5 जवाब
मैं खुद सोच रहा हूं, क्यों एक खाली डिव, जिसमें
डिस्प्ले है: इनलाइन ब्लॉक शैली एक div से भिन्न ढंग से व्यवहार करती है जो पाठ को जोड़ती है यह किसी भी तरह से निम्नलिखित तत्वों के लिए कुछ टॉप-पैडिंग जोड़ता है, जिसे हटाया नहीं जा सकता।
HTML
& lt; p & gt; & Lt; div वर्ग = "ए" & gt; ए & lt; / div & gt; & lt; div class = "b" & gt; बी & lt; / div & gt; & Lt; / p & gt; & Lt; p & gt; & Lt; div वर्ग = "ए" & gt; & lt; / div & gt; & lt; div class = "b" & gt; बी & lt; / div & gt; & Lt; / p & gt;
सीएसएस <पूर्व>
.a {width: 20px; ऊँचाई: 20px; display: inline-ब्लॉक; पृष्ठभूमि का रंग: लाल; }। बी {पृष्ठभूमि रंग: नारंगी; line-height: 20px; font-size: 12px; display: inline-ब्लॉक; }
आउटपुट
क्या कोई इस व्यवहार को समझा सकता है?
इनलाइन तत्व
लंबवत-संरेखित करें: आधारभूत डिफ़ॉल्ट रूप से
आधारभूत
तत्व की मूल आधार उसके मूल के आधार रेखा के साथ संरेखित करता है। कुछ बदले गए तत्वों की आधार रेखा, जैसे
& lt; textarea & gt; HTML विनिर्देश द्वारा निर्दिष्ट नहीं है, जिसका अर्थ है कि इस कीवर्ड के साथ उनका व्यवहार एक ब्राउज़र से दूसरे में बदल सकता है।
आपका नया उदाहरण
.a {width: 20px; ऊंचाई: 20 पीएक्स; प्रदर्शन: इनलाइन-ब्लॉक; पृष्ठभूमि रंग: लाल; ऊर्ध्वाधर-संरेखण: शीर्ष; }। बी {पृष्ठभूमि रंग: नारंगी; रेखा-ऊंचाई: 20px; फ़ॉन्ट-आकार: 12px; प्रदर्शन: इनलाइन-ब्लॉक; ऊर्ध्वाधर-संरेखण: शीर्ष; } Br {line-height: 2; }
& lt; div class = "a" & gt; ए & lt; / div & gt; & Lt; div class = "b" & gt; बी & lt; / div & gt; & Lt; br / & gt; & Lt; div वर्ग = "ए" & gt; & lt; / div & gt; & Lt; div class = "b" & gt; बी & lt; / div & gt;
Comments
Post a Comment