網頁Web-常用CSS-margin、padding

  • 1480
  • 0
  • Web
  • 2022-03-12

常用CSS

  • margin
  • padding

margin

 

  • margin-top:與上方元素的距離
  • margin-right:與右方元素的距離
  • margin-bottom:與下方元素的距離
  • margin-left:與左方元素的距離
  • margin:auto; //代表讓瀏覽器自己去設定。
  • margin:0 auto; //置中。
  • margin:17px 15px 23px 13px;  //代表上外距為 17px,右外距為 15px,下外距為 23px 而左外距則為 13px (上、右、下、左)
  • margin:20px;//四個邊同樣値

  

例:

<div class="container-fluid" style="background-color:yellow;margin-top:30px;">
  .....
</div>

 


padding

  • padding-top 文字與元素上方的邊界
  • padding-right 文字與元素右方的邊界
  • padding-bottom 文字與元素下方的邊界
  • padding-left 文字與元素左方的邊界
  • padding:20px;//四個邊同樣値

例:

<div style="background-color:yellow;padding-bottom:50px;">
 ...
</div>
4個值:
<span style= "padding:50px 30px 0 90px;">文字</span> /*設定邊界上  右  下  左*/
2個值:
<span style= "padding:50px 30px;">文字</span> /*設定邊界"上下","左右"*/
3個值:
<span style= "padding:50px 30px 90px;">文字</span> /*設定邊界"上","左右","下"*/
1個值:
<span style= "padding:50px;">文字</span> /*設定邊界"上下左右"值皆一樣*/

YiruAtStudio - 關於我 - 意如