CSS縮進(jìn)每一行的技巧

在CSS中，我們可以使用text-indent屬性來縮進(jìn)每一行的文本，這個屬性可以指定文本塊中每行的縮進(jìn)量，下面是一些示例代碼，展示如何使用text-indent來實現(xiàn)文本的縮進(jìn)。

示例1: 基本用法

p {
  text-indent: 2em; /* 縮進(jìn)2個em單位 */
}

示例2: 縮進(jìn)多個單位

p {
  text-indent: 5ch; /* 縮進(jìn)5個字符寬度 */
}

示例3: 縮進(jìn)圖片

如果你想在文本塊中縮進(jìn)圖片，可以使用text-align屬性來對齊圖片，并結(jié)合margin來調(diào)整圖片與文本之間的空間。

img {
  text-align: right; /* 圖片靠右對齊 */
  margin-left: 20px; /* 圖片左側(cè)留出20像素的空間 */
}

示例4: 縮進(jìn)列表

對于列表（如ul或ol），你可以使用padding-left來增加縮進(jìn)。

ul {
  padding-left: 20px; /* 增加20像素的縮進(jìn) */
}

示例5: 響應(yīng)式縮進(jìn)

在某些情況下，你可能希望在不同的屏幕尺寸下有不同的縮進(jìn)，這可以通過使用媒體查詢來實現(xiàn)。

p {
  text-indent: 2em; /* 默認(rèn)縮進(jìn) */
}
@media (min-width: 600px) {
  p {
    text-indent: 5ch; /* 在600像素以上屏幕增加縮進(jìn) */
  }
}

通過巧妙地使用這些CSS屬性，你可以控制文本和圖片的縮進(jìn)，以及在不同屏幕下的響應(yīng)式布局，希望這些示例能幫助你更好地理解和應(yīng)用CSS的縮進(jìn)技巧。