CSS padding

<h3>CSS padding 內距屬性與用法範例 留白</h3> <pre> CSS padding: 留白 邊框內的部分。一個盒子有四個邊， 所以我們可以對這四個邊的留白逐一設定。 CSS : padding: [上] [右] [下] [左] padding: [上下] [左右] padding: [上] [左右] [下] 　padding: [四個邊同樣値] CSS padding 的四個邊獨立寫法 : padding-top ：與上個邊的距離 padding-right ：與右方個邊距離 padding-bottom：與下方個邊距離 padding-left ：與左個邊的距離 padding 可以的值有 auto、%、em、px、pt </pre> <br> padding : <input type="number" id="In1" value="10" onchange="change()" min="0" max="50" /> <input type="number" id="In2" value="10" onchange="change()" min="0" max="50" /> <input type="number" id="In3" value="10" onchange="change()" min="0" max="50"/> <input type="number" id="In4" value="10" onchange="change()" min="0" max="50"/> <br><br> <table id="DPP" > <tbody><tr><td> <div id="TT">padding</div> </td></tr></tbody></table> <script> function change(){ //alert(In1) if(In1.value<0){In1.value=0} if(In2.value<0){In2.value=0} if(In3.value<0){In3.value=0} if(In4.value<0){In4.value=0} var a= In1.value+"px "+In2.value+"px "+In3.value+"px "+In4.value+"px "; TT.style.padding = a ; } </script> <style> input {width:80px} #TT {padding:10 10 10 10;} #DPP { border: 1px solid;} h3 { text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre { font-size: 18px; } </style>

00

<h3>CSS margin 屬性用來定義一個區域 </h3> <pre> 例如 DIV span img 等 的外邊界距離 ， CSS : margin : [上] [右] [下] [左] margin : [上下] [左右] margin : [上] [左右] [下] 　margin : [四個邊同樣値] CSS margin 的四個邊獨立寫法 margin-top：與上方元素的距離 margin-right：與右方元素的距離 margin-bottom：與下方元素的距離 margin-left：與左方元素的距離 margin 可以的值有 auto、%、em、px、pt </pre> <br> margin : <input type="number" id="In1" value="10" onchange="change()" /> <input type="number" id="In2" value="10" onchange="change()" /> <br> <br> <div id="DPP"> <div id="TT"><span id="sp">margin</span></div> </div> <script> function change(){ var a= In1.value+"px "+In2.value+"px "; TT.style.margin= a ; //alert(TT.style.margin) } change(); </script> <style> input {width:80px} #DPP { padding: 0px; border: 1px solid; width: 200px; height:200px; margin: 0 auto; font-size: 20px;} // line-height: 1.5; //letter-spacing: 1px; #TT { margin:10px 10px;} #sp { border: 1px solid;} h3 { text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } pre { font-size: 18px; } </style>

00

Edit

#ccs #CCS #CCS padding #CCS margin #HTML padding #HTML margin #內距屬性 #外距屬性