✍ 📁 🙈 🙉 🙊 : CSS padding -----內距留白-----

2024年3月20日星期三

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>

var a= In1.value+"px "+In2.value+"px "+In3.value+"px "+In4.value+"px ";
TT.style.padding = a ;
}
</script>

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }

pre { font-size: 18px; }
</style>

<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>

#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>

Edit

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

2024年3月20日 星期三

CSS padding

2024年3月20日星期三