<kbd>:blue_square: أي نص</kbd>
سوف يتم عرضه بنفس طريقة:
<kbd>:blue_square:أي نص</kbd>
أي نص
لا توجد مسافة مرئية بين الرمز التعبيري والنص، على الرغم من وجود المسافة في كود HTML.
هل هذا قيد على وسم <kbd>؟ هل هناك طريقة أنيقة لإصلاحه أم يجب أن نعتمد على حيل مثل أو ㅤ وما إلى ذلك؟
<kbd>:blue_square: أي نص</kbd>
أي نص
<kbd>:blue_square:ㅤأي نص</kbd>
ㅤأي نص
من المحتمل أن يكون display: inline-flex; الذي يتم تطبيقه على علامات KBD، مما يجبر الأشياء على التقارب معًا.
قد يكون هناك حل بديل لـ CSS هنا، لست متأكدًا.
أحد الحلول هو إضافة بعض القيم لخاصية white-space، مثل pre-wrap، ولكن هذا سيؤدي إلى مشاكل إذا كان لدينا فواصل أسطر متعددة إضافية داخل <kbd>.
سيصبح:
بديل آخر هو إضافة هوامش يسرى و/أو يمنى تلقائيًا للرموز التعبيرية إذا لم تكن العنصر الأول أو الأخير.
في الحالة الحالية:
مع إضافة CSS هذه:
kbd {
// current rules
img {
margin: 0 .5em;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
هل ستكون هذه الهوامش الإجبارية مقبولة؟ إنها أجمل وتزيد من قابلية القراءة، ولكن سيكون من المستحيل على المستخدم عدم وجود هامش بين الرمز التعبيري وبعض النص (بالنسبة لي، سأكون سعيدًا لأنني أرى الهامش الإجباري كميزة).
لست متأكدًا من هذا، دعنا نرى ما يفكر فيه @Designers. من الناحية المثالية، يمكننا فقط تعليم inline-flex أن يكون أكثر … مرونة
أعتقد أنه يمكننا استخدام خاصية gap لهذا؟ المشكلة هي أن تغيير kbd لاستخدام flexbox أزال أي مسافة طبيعية بين العناصر الداخلية:
kbd {
gap: 0.5em;
}
ينتج عنه:
سيؤدي هذا إلى إضافة مسافة بين أي عناصر HTML داخل الوسم KBD، ولن يتطلب أي استثناءات للعنصر الأول/الأخير.
لقد قمت للتو بدمج هذا:
رائع، شكرًا! 
لم أكن أعرف خاصية الفجوة بالمناسبة، من الجيد دائمًا تعلم شيء جديد.