html布局時，元素塊上下間距，用margin-top還是中間插入一個空元素給定height？

這兩種寫法

第一種：會插入一些空代碼

第二種：要考慮一些浮動問題

現在問題是，如果一個網站要大量用到這些東西，用哪一種方法會好一些，或者有沒有更好的方法？

---

&& 這種寫法無疑是上個世紀的。

PS. mt10這種寫法也會被許多人（包括我）鄙視 。

---

路過看了一下回答也是醉了...

要麼好好答，要麼不回答嘛。

題主你這是啥編輯器？

正題：

一般來說，如果你們的設計師靠譜，那麼不會出現亂七八糟的間距，如果出現了，可以和設計師商量下：兄弟，晚上天橋下會會？

比如我之前做設計的時候（捂臉），一般會定下一個基準間距，比如12px。

整個設計體系中，常用間距不會超3種。

gap-base = 12px
gap-small = gap-base / 2
gap-large = gap-base * 2


所以，你可以生成一堆的各種間距的class

.pd-base {
padding: gap-base
}
.pd-small {
padding: gap-small
}
.pd-large {
padding: gap-large
}
// 同時可以生成 margin 相關的，當然一般情況下不需要 margin


以及其各個方向上的衍生

.pd-base-x {
padding-left: gap-base
padding-right: gap-base
}
.pd-base-y {}
.pd-base-left {}
.pd-base-right {}
// ....


如果你有css預處理語言，寫個函數就搞定了

那麼你這個需求就可以這樣寫了

&&

6得不要不要的

例外我個人的意見是不要寫太複雜的選擇器，比如什麼 `.a + .b[class^=c]`的。

何必呢，搞這麼多花樣兒做啥。

再有，你的命名習慣不好，隨便寫class名，寫啊寫的你就發現沒有名字可寫了，而且維護的人真的會打你的。把各種功能的class放在不同的命名空間下是個不錯的實踐，參見boostrap的命名。

學css不要浮躁，不要聽人諷刺說css不就是一個渲染引擎的配置么。

css能寫好的前端真的沒幾個，包括我。

---

我覺得第二種，這樣會少寫了不少div，這樣也更靈活，margin高度通過css控制，清除浮動根據需求加吧

---

都已經什麼時代了，貌似還在寫著十年前的CSS？

靈活運用各種類型的選擇器和偽元素/偽類，就可以在不添加冗餘結構和冗餘className的情況下實現想要的效果。

例如你只想在.header之後的.container上加margin-top，可以這樣寫：

.header+.container {
margin-top: 10px;
}

再比如你那個分割線，可以這樣寫：

.container+.header:before{
background: #fff;
content: "--------分割線-------";
display: block;
height: 30px;
text-align: center;
}

---

現在這年代，flex或grid才是更好的方案吧？感覺好久沒用過浮動了(??ω??)?

---

必然是第二種。

我認為 HTML 是負責結構的，不應該讓它做 space10 這種事，該讓 CSS 乾的就讓 CSS 來干。

---

完全不知道這麼做是為了啥？？我個人建議，為了日後維護項目去選擇，哪個你覺得大夥都能看得懂就去做。別搞那些大夥看不懂的，我不相信你司的老大不說你。

---

我用第一種寫法的時候冰棍還1毛錢一串

---

第二種相對好吧，就從HTML結構來說第二種就比第一種更簡介些。再說能用CSS解決的問題為啥要用HTML+CSS解決

---

margin不是有個外邊距重合的問題么，如果比較特殊的塊或者改動不多的，直接寫行內也可以，沒必要都堅持分離原則。現在也是flex用的多了哦。

---

-

mt10雖然每個用到的div都要加一個，但相比專門寫一個space10的div要好得多。

另外如果要清除浮動並且增加10px，可以定一個公用的偽類來解決，不過就又跟mt10差不多了。

-

---

推薦閱讀：