सीमा-शीर्ष इनलाइन नहीं, सीमा-नीचे इनलाइन - एचटीएमएल, सीएसएस, सीमा

मेरे पास एक साधारण छवि है जिसे मैं सीमा-रेखा और सीमा तल देना चाहता हूं। यह मेरा कोड है:

<div class="details-big">
<img src="/images/../images/full/full21.jpg" alt="title" />
</div>

सीएसएस:

.details-big {
border-top: 8px solid #f0f0f0;
border-bottom: 8px solid #f0f0f0;
}

समस्या यह है कि सीमा-शीर्ष छवि के एक हिस्से को काटता है, जबकि सीमा-तल विपरीत होता है, और सीमा-तल प्रदर्शित होने से पहले भी सफेद पैडिंग जोड़ता है।

मैं बस सीमाओं को बिना किसी रिक्त स्थान या छवि के हिस्सों के कटौती के बिना सीमा में अच्छी तरह से जोड़ा जाना पसंद करूंगा। क्या यह सीएसएस के साथ संभव है?

उत्तर:

उत्तर № 1 के लिए 1

असल में यह शीर्ष पर काटा नहीं जाता है, इसमें बस नीचे एक जगह है, जो इनलाइन द्वारा प्रदान की जाती है img। यदि आपके div में केवल छवि है, तो आप बस सेट कर सकते हैं font-size:0 आपके div के लिए। इसके अलावा आप अपने लिए सीमा निर्धारित कर सकते हैं img बजाय:

.details-big {
border-top: 8px solid #f0f0f0;
border-bottom: 8px solid #f0f0f0;
font-size:0;
}

आप भी सेट कर सकते हैं display:block आपके लिए img:

.details-big > img {
display:block;
}

डेमो।


संबंधित सवाल
सबसे लोकप्रिय