Padding'de calc kullanma

Edit: Sorun XenForo kaynaklıymış, sorunu şu şekilde less kodlamasıyla çözdüm:

padding: ~"calc(3em - 3px) 0";

Merhaba arkadaşlar. Ufak bir calc sorunu yaşıyorum. Stack Overflow'u da kurcaladım ama net bir yanıt bulamadım.

Şöyle bir div'im var.

<div class="abc">
<div class="def"></div>
</div>

abc div'inin üst ve alt padding değerlerinin 3em + 3em olması gerekiyor. def div'inin ise üst ve alt 6px padding değerleri bulunuyor. Toplam ölçü (abc) 3em olacağı için abc div'ine altta gösterdiğim şekilde bir calc uygulayarak içteki 6px padding'i genel padding'den çıkarma yaparak net 3em yapmaya çalışıyorum ancak işlemiyor (daha doğrusu CSS'i uyguladıktan sonra front-end'de calc(-3em) olarak renderlanıyor).

Sebebi ne olabilir?

Uygulanan CSS:

padding-top: calc(3em - 6px);
padding-bottom: calc(3em - 6px);

Front-end'de renderlanan CSS:

padding-top: calc(-3em);
padding-bottom: calc(-3em);

Puding diye okuyup acaba domuz jelatini mi katıyorlarmış diye düşünmüştüm içimden

Renderlemeyi kim yapıyor.. 3. parti bir şey mi kullanıyorsunuz CSS nereden yazıyorsunuz

XenForo forum yazılımında çalışıyorum hocam (local ve sunucu ortamı fark eder mi bilmiyorum ama local'de wamp ile çalışıyorum).

CSS'i XenForo yönetim panelden ekliyorum (WordPress'te style.css'e ekler gibi düşünün). Renderlama derken normal sayfa yüklenmesini kastediyorum. Arkaplanda kod ilk verdiğim şekilde yer alırken, sayfa yüklendiğinde öğeyi denetle yaptığımda ikinci şekilde gözüküyor. Oysa ki manuel olarak öğeyi denetle'den değiştirip yine ilk haline getirince çalışıyor. Anlamadım gitti.

Peki kaynaktan ilgili CSS'e gittiğinizde uygulanan CSS'teki gibi görünüyor mu, öğeyi denetleyerek değilde. Acaba bu sistem CSS'i kendisi minify falan etmeye çalışırken karıştırıyor olmasın

Sanırım XenForo'dan kaynaklı bir durummuş hocam. Benzer sorunu burada başkası da yaşamış, çözüm olarak CSS yerine Less kullanımı önerilmiş.

Az önce statik bir HTML dosyası oluşturup deneme yaptım, gayet düzgün işliyor. XenForo'da işler karışıyor