在CSS中,我們可以使用margin
屬性來(lái)設(shè)置頁(yè)面元素兩邊的距離。margin
屬性可以接收四個(gè)值,分別代表上、右、下、左四個(gè)方向的距離,如果我們想要設(shè)置元素兩邊的距離,可以只給margin
屬性傳遞兩個(gè)值,***個(gè)值代表上下的距離,第二個(gè)值代表左右的距離。
如果我們想要設(shè)置一個(gè)元素的上邊距離為10px,下邊距離為10px,左邊距離為20px,右邊距離為20px,我們可以這樣寫(xiě)CSS代碼:
.element { margin: 10px 20px; }
在上面的代碼中,.element
是我們要設(shè)置的元素的類(lèi)名,margin: 10px 20px;
表示該元素的上邊距離為10px,左右距離為20px。
如果我們想要設(shè)置全局的左右距離,可以通過(guò)設(shè)置選擇器的
margin-left
和margin-right
屬性來(lái)實(shí)現(xiàn):
{ margin-left: 20px; margin-right: 20px; }
上面的代碼表示全局的左邊距離為20px,右邊距離為20px,注意這種方法會(huì)影響到頁(yè)面上的所有元素。
如果我們想要設(shè)置某個(gè)特定元素的距離,可以通過(guò)給該元素添加特定的類(lèi)名或ID來(lái)實(shí)現(xiàn):
.specific-element { margin: 10px 20px; }
或者:
#specific-element { margin: 10px 20px; }
在上面的代碼中,.specific-element
和#specific-element
都是特定元素的類(lèi)名和ID,我們可以根據(jù)需要選擇使用哪種方式。