मेरे पास एक बटन के लिए एक वर्ग है जिसका उपयोग लिंक और बटन पर किया जा सकता है। दुर्भाग्य से, समान शैलियों का उपयोग करने के बावजूद, 2 तत्व अलग दिखते हैं।

.close {
  width: 36px;
  height: 36px;
  border: 0;
  background-color: #ecf0f1;
  line-height: 36px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  border-radius: 50%;
}
<a href="#" class="close">&times;</a>
<br /><br />
<button class="close">&times;</button>

जैसा कि आप देख सकते हैं, बटन का क्रॉस लंबवत रूप से केंद्रित नहीं है। यह x-अक्ष से थोड़ा नीचे जाता है। इसका कारण क्या है? और मैं इसे कैसे ठीक कर सकता हूं? किसी भी मदद के लिए धन्यवाद।

BTW, मैं MacOS का उपयोग कर रहा हूं, इसलिए मेरे कंप्यूटर में -apple-system फ़ॉन्ट का उपयोग किया जा रहा है।

0
darkhorse 15 जून 2020, 05:43

1 उत्तर

सबसे बढ़िया उत्तर

button और a टैग में कुछ पूर्वनिर्धारित गुण होते हैं जो दिखावट को प्रभावित कर सकते हैं।

यदि आप चाहते हैं कि वे सार्वभौमिक दिखें, तो शैली की शुरुआत में all: initial जोड़ने का प्रयास करें। यह ब्राउज़र द्वारा सभी पूर्वनिर्धारित शैलियों से छुटकारा दिलाएगा।

.close {
  all: initial;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border: 0;
  background-color: #ecf0f1;
  line-height: 36px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  color: black;
  -webkit-text-fill-color: currentColor;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  border-radius: 50%;
}
<a href="#" class="close">&times;</a>
<br /><br />
<button class="close">&times;</button>
1
Hao Wu 15 जून 2020, 02:59