html裡每個物件都有盒模型，盒模型是包裹住物件的容器
按下f12可以透過檢查，查看物件的盒模型

 <h2>我有盒子</h2>

這個就是他的盒子，藍色為內容content,padding是內邊距，border是邊框，margin是外邊距
盒子的寬度和高度都是，內容+padding+border
大多數padding和border以及margin都預設為0
H1到H6,p,ul li等有默認上下margin

    <div>我是div1</div>
    <div>我是div2</div>
    <span>我是span1</span>
    <span>我是span2</span>

    <div style="margin: 2%;">我是div1</div>
    <div style="margin-top:5%;">我是div2</div>

margin可以全部一起設定也可以各個分開
margin-top設定上
margin-left設定左
margin-right設定右
margin-bottom設定下

   
    <div style="margin: 4% 2% 2% 5%;">我是div1</div>
    <div style="margin: 5% 25%;">我是div2</div>

第一行四個數字分別代表給margin，上,右,下,左,設定
第二行則是先設定上下，在設定左右外邊距，設定margin，25%能達大類似置中的效果

    <div style="margin: 4% 2% 2% 5%;padding: 25% 25%;">我是div1</div>
    <div style="margin: 5% 25%;padding:5%;">我是div2</div>

內邊距padding基本上跟margin的調整一樣，差別在調整的地方不同還有padding會對盒子的大小有影響

  <div style="margin: 5% 25%;padding:5%;border-style: solid;
    border-color: chartreuse;border-width: 20px;">我是div2</div>

另外也可以寫成

 <div style="margin: 5% 25%;padding:5%;border: 20px solid chartreuse">我是div2</div>

border-color:邊框顏色
border-widt:邊框寬度
border-style:邊框的形式

下面是不同的border-style

可以給border的每一邊做不同設定，包括樣式，寬度，顏色

.border_color{
    border-top-style: solid;
    border-top-width: 20px;
    border-top-color: black;
    border-left-width: 10px;
    border-left-style: dashed;
    border-left-color: blue;
    border-right-width: 10px;
    border-right-style: dashed;
    border-right-color: rgb(255, 0, 0);
    border-bottom-style:groove;
    border-bottom-width: 20px;
    border-bottom-color: yellow;
    margin: 0 25%;
    
}

 <div class="border_color">box1</div>

盒子陰影與文字陰影
box-shadow: x偏移量 Y偏移量 模糊半徑 擴散半徑 顏色
不用五個全打可以是 x偏移量 Y偏移量 模糊半徑 顏色
也可以x偏移量 Y偏移量 顏色
偏移量可以是負數
模糊半徑不能設太高不然會看不見
可以用,隔開來設定多個SHADOW
text-shadow跟box-shadow一樣，box-shadow作用於整個盒模型,text-shadow作用在文字內容

.box1{
    width: 200px;
    height: 200px;
    text-align: center;
    display: inline-block;
    box-shadow: 15px 20px 5px hotpink,-10px -5px 5px rebeccapurple;
}
span{text-shadow: 5px 8px 3px tomato;}

    <div class="box1">BOX SHADOW</div>
    <span>TEXT-SHADOW</span>