SORU
19 Kasım 2009, PERŞEMBE


Alt öğe üzerinde marj üst öğe taşır

div (üstdiv başka içeren) (çocuk). Üst özel bir CSS stili ile body ilk unsurdur. Başladığım zaman

.child
{
    margin-top: 10px;
}

Sonuçta çocuğumun en üst ile uyumlu olmasıdır. Çocuk 10px için aşağıya kaymıştır olmak yerine, ailemin 10px aşağı taşır.

Benim DOCTYPE 10* *olarak ayarlanmıştır.

Burada neyi kaçırıyorum?

1 düzenleyin
Benim üst yukarıdan aşağıya (piksel) mükemmel bunun altında görüntülenecek olan bir arka plan vardır, çünkü kesinlikle tanımlanmış boyutlara sahip olması gerekir. Böylece dikey kenar boşluklarını ayarlamahayır.

2 düzenleyin
Bu davranış FF aynı gibi YANİ CR.

CEVAP
21 Aralık 2009, PAZARTESİ


Buldum da ekleyebilirsiniz Child elements with margins within DIVs alternatif:

.parent { overflow: auto; }

ya da:

.parent { overflow: hidden; }

Bu collapse kenar boşluklarını önler. Kenarlık ve dolgu aynı. Bu nedenle, aşağıdakileri de üst marj bir çöküşü engellemek için kullanabilirsiniz:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Yoğun istek üzerine güncelleme: Çöken boşluklarını amacı metinsel içerik ilgileniyor. Örneğin:

<style type="text/css">
    h1, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<h1>Title!</h1>
<div>
    <p>Paragraph</p>
    <ul>
        <li>list item</li>
    </ul>
</div>

Tarayıcı kenar boşlukları çöker çünkü, metin beklediğiniz gibi görünür. Her öğe etrafında boşluk var sağlar, ama aralığı iki katına olmayacak. <h1> <p> sınırları ekleyin, ama sonu değil. Aynı <p> <ul> elemanı için olacak.

Ne yazık ki, modern tasarımları ile bu fikrin açıkça bir kap istediğinizde sizi ısırabilir. Bu CSS block formatting context yeni bir konuşma denir. overflow veya teminat hile size verecektir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jordie Jordan

    Jordie Jorda

    27 Ocak 2008
  • Maschine Tutorials

    Maschine Tut

    15 ŞUBAT 2011
  • MrDevin521

    MrDevin521

    18 Temmuz 2010