2008-11-12 21 views
30

Jeśli masz sekwencję elementów bloków i chcesz umieścić margines między nimi.Margines CS-top vs margin-bottom

Który wolisz, margines-górny, margines-dolny lub oba? Czemu?

+0

nie zapomnij o zawaleniu marży –

Odpowiedz

15

Zawsze używam margin-bottom, co oznacza, że ​​nie ma niepotrzebnej przestrzeni przed pierwszym elementem.

+0

Używam tego podejścia w dzisiejszych czasach. Wydaje się bardzo naturalne/logiczne, a często margines po czymś jest bardziej logicznie związany z tą rzeczą niż powyższy margines, jeśli to ma jakiś sens. Mam jednak problem z umieszczeniem mniejszej przestrzeni między przedmiotami tego samego typu (np. Znacznikami P) niż spacją między przedmiotami różnego rodzaju. Z niektórych przykładów na tej stronie wydaje się, że przejście na najwyższy margines oferuje bardziej eleganckie rozwiązanie. Ale nie wiem. Myślę, że rozpocznę kolejny wątek SO dla tego konkretnego pytania. – sugardaddy

+0

Zmieniłem to na bit po 'margin-top' kilka razy. Podczas gdy @blundy ma punkt, nigdy nie znalazłem się w potrzebie tego rozwiązania. Ale potem znowu używam React z SASS i Radium, co powoduje, że wiele wynalezionych przez lata hacków CSS jest przestarzałych. – BAR

31

W zależności od kontekstu. Ale ogólnie, margin-top jest lepszy, ponieważ można go usunąć za pomocą :first-child. W ten sposób:

div.block { 
    margin-top: 10px; 
} 

div.block:first-child { 
    margin-top: 0; 
} 

W ten sposób marginesy są tylko pomiędzy blokami.

Działa oczywiście tylko dla bardziej nowoczesnych przeglądarek.

+0

Należy pamiętać, że takie pseudo elementy mają tendencję do pękania w starszych przeglądarkach. – thismat

+0

to działa na IE <= 6 – ken

+0

Już wcześniej miałem problemy z pseudo-klasami i staram się ich unikać, dopóki bardziej nowoczesne przeglądarki nie staną się "stare". – thismat

1

@Ta mata - nie zgadzam się z twoim podejściem. Przypisałem spacjowanie elementom w sposób semantyczny i użyłem selektorów kontekstowych do zdefiniowania zachowania dla tego zbioru elementów.

.content p { /* obviously choose a more elegant name */ 
    margin-bottom: 10px; 
} 

nazewnictwa klas po ich zachowaniu, a nie ich zawartość jest rodzajem równi pochyłej, a muddies górę charakter semantyczny HTML. Na przykład, jeśli w jednym obszarze strony wszystkie elementy z klasą .top10 nagle potrzebowały 20 pikseli? Zamiast zmieniać jedną regułę, musisz utworzyć nową nazwę klasy i zmienić ją na wszystkie elementy, które chcesz zmienić.

Aby odpowiedzieć na oryginalne pytanie, zależy to całkowicie od sposobu układania elementów. Czy potrzebujesz dodatkowej przestrzeni u góry lub na dole?

0

Tak, zwykle używam również marginesu-dołu, a następnie przypisuję ostatnią klasę do ostatniej w grupie. Zakładając, że chcesz na tym zmienić inną stylizację.

.discussion .detailed.topics { margin: 20px 0 }  
.discussion .detailed.topics .topic { margin-bottom: 30px } 
.discussion .detailed.topics .topic.last { margin-bottom: 0 } 

To mocny podejście gdy używasz dynamicznie napędzany zawartości

HTML (Razor Zobacz Engine)

<div class="detailed topics"> 
    @if (Model.ActiveTopics != null && Model.ActiveTopics.Count > 0) 
    { 
     for (int i = 0; i < Model.ActiveTopics.Count(); i++) 
     { 
      var topic = Model.ActiveTopics[i]; 
      <div class="[email protected](i == Model.ActiveTopics.Count - 1 ? " last" : "")"> 
       ...         
      </div> 
     } 
    } 
</div> 
+0

Właściwie używam podejścia podobnego do tego, z wyjątkiem tego, że mam klasę dla elementów górnych/pierwszych. Często nie potrzebuję korzystać z tej klasy, ponieważ i tak dochodzi do załamania marży. Ale lubię wstawiać klasę "nieparzystą" na pierwszym, ponieważ bardziej prawdopodobne jest dołączanie do listy bloków, a nie poprzedzanie (i dlatego dołączanie wymaga mniejszej ilości edycji, aby przenieść ostatnią klasę do ostatniego elementu). – sugardaddy

9

Inną opcją jest użycie selektora + połączeniu z margin-top:

.article + .article { 
    margin-top: 10px; 
} 

To wybiera drugi element, który h oznacza, że ​​reguła nie będzie w ogóle dotyczyć pierwszego elementu. Brak dodatkowych klas, pseudoklas lub przestrzeni nad lub pod elementami.

0

Zawsze umieszczam margines na elemencie, który uważam za bardziej opcjonalny. To znaczy element, który najprawdopodobniej zostanie usunięty z DOM. Przykład:

<div class="title">My Awesome Book</div> 
<p>Description of My Awesome Book</p> 

W tym przypadku, chciałbym umieścić margin-top do <p>, ponieważ opis nie miałoby sensu bez tytułu, ale opis ma pewien potencjał, aby zostać usunięte, jeśli chciałem tylko wspomnieć tytuł.

Inny przykład:

<img src="icon.png"> 
<div>My Awesome Book</div> 

Tutaj zrobiłbym odwrotnie. Dodałbym margin-bottom do ikony. Uważam, że ikona jest tylko ozdobą i znowu ma większy potencjał do usunięcia.

To jest moja filozofia. Elementy stylu sposób na zapobieganie zmianom CSS poprzez potencjalne zmiany DOM.