html怎麼設定水平線與文字的距離

在html中，可以透過在水平線標籤中，使用style屬性來新增外邊距樣式來設定水平線與文字的距離。而外邊距樣式可以使用margin、margin-top或margin-bottom屬性來設定。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

html設定水平線與文字的距離

<div>
	文字--没有设置距离
	<hr/>
	文字
</div>
<div>
	文字
	<hr style="margin-top: 20px"/>
	文字
</div>
<div>
	文字
	<hr style="margin-bottom: 20px"/>
	文字
</div>
<div>
	文字
	<hr style="margin: 20px 0 30px;"/>
	文字
</div>

效果圖：

說明：

1、margin屬性

margin簡寫屬性在一個宣告中設定所有外邊距屬性。該屬性可以有1到4個值。

實例:

margin:10px 5px 15px 20px;

• 上邊距是10px

• 右邊距是5px

• ##下邊距是15px

• 左邊距是20px

margin:10px 5px 15px;

• 上邊距是10px

• 右邊距和左邊距是5px

• 下邊距是15px

margin:10px 5px;

• #上邊距和下邊距是10px

• 右邊距和左邊距是5px

margin:10px;

• 所有四個邊距都是10px

2、使用margin-top、margin-bottom屬性

• margin-top ：設定元素的上外邊距
  

• margin-bottom：設定元素的下外邊距

（學習影片分享：css影片教學）

以上是html怎麼設定水平線與文字的距離的詳細內容。更多資訊請關注PHP中文網其他相關文章！