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?
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?
Zawsze używam margin-bottom
, co oznacza, że nie ma niepotrzebnej przestrzeni przed pierwszym elementem.
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
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
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.
@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?
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>
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
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.
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.
nie zapomnij o zawaleniu marży –