सीएसएस इनलाइन-ब्लॉक बनाम फ्लोट

मैं float और inline-block पर कुछ परीक्षण कर रहा हूं और मैंने देखा है कि उनके बीच एक अंतर है।सीएसएस इनलाइन-ब्लॉक बनाम फ्लोट

जैसा कि आप THIS EXAMPLE से देख सकते हैं, अगर मैं display:inline-block का उपयोग करता हूं तो divs के बीच थोड़ा अंतर होता है लेकिन यदि मैं float:left का उपयोग करता हूं तो यह अपेक्षा करता है।

कृपया ध्यान दें कि मैं एरिक मेयर के रीसेट सीएसएस v2.0 का उपयोग कर रहा हूं।

ऐसा इसलिए है क्योंकि मैं कुछ गलत कर रहा हूं या इस तरह inline-block व्यवहार करता है (उस स्थिति में यह बहुत विश्वसनीय नहीं है)।

एचटीएमएल

<!DOCTYPE html> 
<html> 
<head> 
    <title>How padding/margin affect floats</title> 
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="wrap"> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
    </div> 
</body> 
</html>

(रीसेट के बिना)

#wrap{ 
    width: 600px; 
    margin:auto; 
} 

.square{ 
    width: 200px; 
    height: 200px; 
    background: red; 
    margin-bottom: 10px; 
    /*display: inline-block;*/ 
    float:left; 
}

स्रोत

2012-11-26 Tomer

मूल तत्व font-size: 0; दें।

फिर, font-size: 12px (या जो भी आकार अपने डिजाइन तय) को बच्चों की font-size सेट इस तरह:

#wrap{ 
    font-size:0; 
} 
.square{ 
    font-size:12px; 
}

स्रोत

2012-11-26 09:03:42

मैं नाव और इनलाइन-ब्लॉक पर कुछ परीक्षण कर रहा हूँ और मैं वहाँ देखा है है सीएसएस उनके बीच एक अंतर।

जो भी संसाधन आप निहितार्थ यह है कि वे नहीं एक ही हो सकता है दे दी है भ्रामक है। वे completely different things हैं।

divs एक margin नहीं है यही कारण है कि उन्हें

के बीच एक छोटे से मार्जिन है। यह HTML में div एस के बीच लाइन-ब्रेक के परिणामस्वरूप एक स्थान है। एक समाधान केवल लाइन-ब्रेक को हटाना होगा, दूसरा एक तत्व तत्व पर font-size: 0 सेट करना होगा (इस प्रकार रिक्त स्थान को प्रस्तुत नहीं किया जा सकता है)।

ध्यान दें कि यदि आप दूसरी विधि का उपयोग करते हैं, तो आपको अंदरूनी div एस पर एक और font-size सेट करने की आवश्यकता होगी, अन्यथा उनके अंदर का पाठ प्रस्तुत नहीं किया जाएगा।

आशा है कि मदद करता है!

स्रोत

2012-11-26 09:03:32 Chris

धन्यवाद, मुझे पता नहीं था कि लाइन-ब्रेक को रिक्त स्थान के रूप में माना जा रहा है। – Tomer

@ ftom2 हाँ, यह हमेशा HTML के साथ मामला है। इसी प्रकार, टैब को रिक्त स्थान के रूप में प्रस्तुत किया जाता है। – Chris

यह क्योंकि रिक्त स्थान की है। यदि आप कंटेनर तत्व पर font-size: 0 सेट करते हैं तो अंतराल दूर हो जाएंगे (इनलाइन-ब्लॉक पर font-size को रीसेट करना सुनिश्चित करें)।

स्रोत

2012-11-26 09:03:54 Henrik

जैसा कि मैं इसे समझता हूं, इनलाइन-ब्लॉक तत्व अन्य इनलाइन ऑब्जेक्ट्स के मूल मूल छद्म-मार्जिन स्पेसिंग के साथ प्रदर्शित होंगे। जबकि फ्लोट किए गए तत्वों को दस्तावेज़ के ऑब्जेक्ट प्रवाह के संबंध में पूरी तरह से स्वतंत्र माना जाता है (इसलिए, कोई कष्टप्रद अंतराल नहीं)।

क्षमा करें मैं अधिक विस्तृत उत्तर नहीं दे सकता, लेकिन यह निश्चित रूप से कुछ है जो मैंने पहले कुश्ती की है।इसके लायक होने के लिए, विश्वसनीय इनलाइन-ब्लॉक तत्वों के लिए परेशान होना चाहिए, आपको केवल उन छद्म-मार्जिन की क्षतिपूर्ति करना याद रखना चाहिए यदि आप किसी मूल तत्व के भीतर धक्का दिए बिना सब कुछ करने की कोशिश कर रहे हैं अगली पंक्ति

स्रोत

2012-11-26 09:15:42 monners

उत्तर

संबंधित मुद्दे