CSS marjları ekleyin veya birleştirilsin mi?

en aşağıdaki kodu olduğunu varsayalım:CSS marjları ekleyin veya birleştirilsin mi?

<div style="margin-bottom:100px;">test</div> 
<div style="margin-top:100px;">test</div>

Bunu bazen elemanları arasında marjının 100px oluşturur ve bazen (biz aşina değilim belirli ayarları kullandığınızda) 200px fark ettim. Spesifikasyonda bunun hakkında herhangi bir bilgi bulamıyorum. Bu neye dayanıyor?

o zaman h1 marjı p marjı ile kombine edilecek boş belgede h1 ve p varsa. Toplamayacaklar. Hangisi büyükse kullanılır.

kaynak

2013-02-05 Atadj

Bana aynı görünüyorlar: http://jsfiddle.net/s7bWq/ – ashley

Bunun üzerinde biraz bulanık, ama bence tarayıcıların yapması gereken şey bu. Yani, iki kenardan daha büyük kullanın. Tarayıcıya özel olabilir ama emin değilim ... –

DIV'ler her zaman 200 piksellik bir kenar boşluğu oluşturacaktır. Ama 'h1' +' p' onları 100 piksele birleştirir. Bunun boş bir belgede test edilmesi gerekiyor. – Atadj

Bu oluyor çünkü kenar boşluklarınız daraltılıyor. Belirli marjlar çakışabilir (çoğunlukla blok öğeleri) ve hesaplanmış eleman stili kurallarında tanımlanan iki değerin büyük kısmı tarafından tanımlanan bir kombine marj oluşturabilir - burada olanlar budur. CSS Box Model belgesinden This section belgesi ayrıntılı olarak açıklanmaktadır.

Düzenleme: bir ilgi noktası olarak, bu sorunun üstesinden gelebilirsiniz kırma şeyler olmadan birkaç yönden

öğeleri Yapımı (yani katlanabilir kenar boşluklarını bölünürler.) (Çok ?) width: 100%; display: inline-block
height: 0; width: 0; overflow: hidden öğesinin yerleştirilmesi, öğelerin arasına bir nokta veya bir nokta koyarak yerleştirilir. Göstermek için ashley'nin fiddle'u çatallı bıraktığımı gösteririm.

Muhtemelen başka yöntemler de vardır, ancak bunlar gerekirse katlanabilir kenar boşluklarını aşmanın hızlı ve kirli bir yoludur.

kaynak

2013-02-05 09:31:39

Büyük sitelerde sıklıkla kaybolan bir şey, hat yüksekliğidir. Öğenin işlenen yüksekliğinden daha düşük bir değere ayarlarsanız, kenar boşluklarının piksellerini de kaybedebilirsiniz. – DMTintner

Tam olarak aradığım şey budur :) Bu sadece standart bir özellikten daha karmaşıktır. belki de bu yüzden bunu bulmak zordu. – Atadj

CSS marjları ekleyin veya birleştirilsin mi?

cevap

İlgili konular