CSS padding 內距屬性與用法範例 留白

CSS padding 內距屬性與用法範例 留白

CSS padding: 留白 邊框內的部分。一個盒子有四個邊，
             所以我們可以對這四個邊的留白逐一設定。


CSS : padding: [上] [右] [下] [左]      padding: [上下] [左右]
      padding: [上] [左右] [下]       　padding: [四個邊同樣値]


CSS padding 的四個邊獨立寫法 : padding-top   ：與上個邊的距離
                              padding-right ：與右方個邊距離
                              padding-bottom：與下方個邊距離
                              padding-left  ：與左個邊的距離


padding 可以的值有 auto、%、em、px、pt

                                                                 








                                                                 
id="table1"
第一行 欄位 1
第一行 欄位 2
第二行 欄位 1
第二行 欄位 2









id="table1"
第一行 欄位 1
第一行 欄位 2
第二行 欄位 1
第二行 欄位 2



<style>
     #table1 {padding:10px} 
     #table2 td{padding:10px} 
</style>

<div style="border:3px solid black;height:75%;width:100%;display:flex;justify-content: center;align-items:center;"> <div id="Div" style="border:1px solid blue; height: 150px;width: 300px;padding : 0px 0px; "><div style="border:1px solid red;height:150px;width:300px">hhhhhhh</div> </div></div> </div><pre style="font-size: 20px ;">padding : <INPUT type="text" id="TT1h" maxlength="4" value="30" size="2" onmouseover="this.select()" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px <INPUT type="text" id="TT1v" maxlength="4" value="30" size="2" onmouseover="this.select()" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px<br /><br /></pre> <script>function Mtb(x) { Div.style.padding =TT1h.value+"px " + TT1v.value+"px " ; //Div.innerHTML = "margin : " + TT1h.value+"px " + TT1v.value+"px " ; } Mtb(1); function isNumberKey(evt,ID,VV){ var VV = document.getElementById(ID) ; var charCode = (evt.which) ? evt.which : event.keyCode if(VV.value > 120){VV.value = 120;Mtb();return false;} if(charCode == 45 ){return true;} if (charCode > 31 && (charCode < 48 || charCode > 57)) {Mtb();return false;} Mtb();return true; } </script>

00

#CSS padding 四個邊留白#CSS padding-top 與上個邊的距離#CSS padding-right 與右方個邊距離#CSS padding-bottom 與下方個邊距離#CSS padding-left 與左個邊的距離