HTML中的padding和margin


padding

(內邊距)

語法:

(1)padding-left:10px; 左內邊距

(2)padding-right:10px; 右內邊距

(3)padding-top:10px; 上內邊距

(4)padding-bottom:10px; 下內邊距

(5)padding:10px; 四邊統一內邊距

(6)padding:10px 20px; 上下、左右內邊距

(7)padding:10px 20px 30px; 上、左右、下內邊距

(8)padding:10px 20px 30px 40px; 上、右、下、左內邊距

作用描述:
  • 是指該元素邊框線以內的距離,設定之后,該元素內部的非漂浮或定位元素都會距離該元素的邊框距離該設定的值的長度;
  • 當設定該值后,如果設定的值和元素內部已有元素的高度或寬度超出本身的長時,會自動將長度變長以適應內容,所以此時應當在樣式中加入box-sizing:border-box;屬性,將邊框長寬固定為邊框所定值;
  • 不可以設置負值,不報錯,但沒有效果;

 

margin

(內邊距)

語法:

(1)margin-left:10px; 左外邊距

(2)margin-right:10px; 右外邊距

(3)margin-top:10px; 上外邊距

(4)margin-bottom:10px; 下外邊距

(5)margin:10px; 四邊統一外邊距

(6)margin:10px 20px; 上下、左右外邊距

(7)margin:10px 20px 30px; 上、左右、下外邊距

(8)margin:10px 20px 30px 40px; 上、右、下、左外邊距

作用描述:
  • 是指該元素邊框線以外的距離,設定之后,該元素的外邊距離所設置方向的元素會相應增加或減少;
  • 可以設置負值,會向相反方向移動;

 

margin是盒模型的外邊距,padding是盒模型的內邊距;

用margin時,最好給父級元素加上overflow:hidden;(溢出隱藏)

用padding時,最好給自身加上box-sizing:border-box;(固定邊框)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM