在 CSS 中,列表是一種常見的 HTML 元素,但如何調整列表項(list item)間的間距呢?
ul { margin: 0; padding: 0; } li { margin-bottom: 10px; }
以上是一個基本的 CSS 樣式,它會將列表的外邊距(margin)和內邊距(padding)都設為 0,接著讓每個列表項之間的下邊距(margin-bottom)為 10 像素。
如果你希望列表項之間的間距更小一些,可以將 margin-bottom 的數值調小
li { margin-bottom: 5px; }
當然,如果你希望列表項之間的間距更大一些,則可以將 margin-bottom 的數值調大
li { margin-bottom: 20px; }
此外,對于有序列表(ordered list)和無序列表(unordered list)的情況還有一些特殊設置,比如可以給每個列表項加上 padding-left,這樣可以讓列表項的文字與列表的編號或圓點對齊。
ol, ul { margin: 0; padding: 0; } li { margin-bottom: 10px; padding-left: 20px; }
總體來說,調整列表項間距的方式并不難,只需要通過 CSS 的 margin 屬性來控制即可,具體的數值則視情況而定,需要根據頁面設計和實際效果來調整。
上一篇css中li屬性