Kutu Modeli Görselleştirici

Bu araç, CSS kutu modelini iç içe geçmiş renkli bir diyagram (margin, border, padding, content) olarak görüntüler ve her kenar değerini değiştirdiğinizde hem görseli hem de oluşturulan CSS'i günceller. Margin/border/padding değerlerinin her birinin üst/sağ/alt/sol için piksel cinsinden bağımsız girişleri vardır ve içerik kutusunun genişliği ve yüksekliği bulunur. Bir katman kartına tıkladığınızda halka ile vurgulanır ve toplam oluşturulan boyut hesaplanıp görüntülenir.

1. Gruplandırılmış kartlarda her kenar için Margin, Border ve Padding değerlerini (px cinsinden) düzenleyin. 2. Content genişliğini ve yüksekliğini ayarlayın. 3. Diyagramda o katmanı vurgulamak için herhangi bir katman kartına tıklayın. 4. İç içe diyagram toplam dış boyutları gösterir ve oluşturulan CSS kutusu canlı olarak güncellenir. 5. CSS Code kartındaki Copy düğmesine tıklayarak oluşturulan bildirimleri kopyalayın.

Çıktı, `margin`, `border-width` (`border-style: solid;` ile birlikte) ve `padding` için `top right bottom left` kısaltmasını, ayrıca açık `width` ve `height` değerlerini ve toplam dış boyutu gösteren bir yorum satırını kullanır. Toplam genişlik = sol margin + sol border + sol padding + içerik genişliği + sağ padding + sağ border + sağ margin (yükseklik benzer şekilde). Diyagram sığacak şekilde ölçeklenir ve minimum içerik boyutu 60x30 px olduğundan çok küçük kutular görünür kalır.