CSS margin 屬性與用法範例

CSS margin 外距距離

<pre style="font-size:22px;"><br />CSS margin : 屬性用來定義一個區域 例如 DIV span img 等 的外邊界距離 ，<br /><br /><br />CSS : margin : [上] [右] [下] [左] margin : [上下] [左右]<br /> margin : [上] [左右] [下] 　margin : [四個邊同樣値]<br /><br /><br />CSS margin 的四個邊獨立寫法 : margin-top：與上方元素的距離<br /> margin-right：與右方元素的距離<br /> margin-bottom：與下方元素的距離<br /> margin-left：與左方元素的距離<br /><br /><br />margin 可以的值有 auto、%、em、px、pt<br /><br /></pre>

00

<div style="border:3px solid black;height:75%;width:100%;display:flex;justify-content: center;align-items:center;"> <div style="border:3px solid black;height:150px;width:300px;display:flex;justify-content: center;align-items:center;"> <div id="MLRTB" style="border:3px solid red;height:50px;width:180px;margin-top:0px;">margin-top:-140px</div> </div> </div><pre style="font-size: 20px ;">margin-top -100<input type="radio" name="radio" onclick="Mtb(1)" checked> +100<input type="radio" name="radio" onclick="Mtb(2)"> margin-bottom -100<input type="radio" name="radio" onclick="Mtb(3)" > +100<input type="radio" name="radio" onclick="Mtb(4)"><br />margin-left -100<input type="radio" name="radio" onclick="Mtb(5)" > +100<input type="radio" name="radio" onclick="Mtb(6)" > margin-right -100<input type="radio" name="radio" onclick="Mtb(7)" > +100<input type="radio" name="radio" onclick="Mtb(8)" > <br /><br /></pre> <script>function Mtb(x) { MLRTB.style.margin = "initial"; if(x == 1){MLRTB.style.marginTop="-100px";MLRTB.innerHTML="margin-top: -100"} if(x == 2){MLRTB.style.marginTop="100px";MLRTB.innerHTML="margin-top: 100"} if(x == 3){MLRTB.style.marginBottom ="-100px";MLRTB.innerHTML="margin-bottom: -100"} if(x == 4){MLRTB.style.marginBottom ="100px";MLRTB.innerHTML="margin-bottom: 100"} if(x == 5){MLRTB.style.marginLeft="-100px";MLRTB.innerHTML="margin-left: -100"} if(x == 6){MLRTB.style.marginLeft="100px";MLRTB.innerHTML="margin-left: -100"} if(x == 7){MLRTB.style.marginRight ="-100px";MLRTB.innerHTML="margin-right: -100"} if(x == 8){MLRTB.style.marginRight ="100px";MLRTB.innerHTML="margin-right: -100"} } Mtb(1) </script>

00

<div style="border:3px solid black;height:75%;width:100%;display:flex;justify-content: center;align-items:center;"> <div style="border: 5px solid blue; height: 150px;width: 50%; "><div id="Div" style="border: 5px solid red; margin: 0px 0px; height:100px;width:150px">hhhhhhh</div> </div></div> </div><pre style="font-size: 20px ;">margin : <INPUT type="text" id="TT1h" maxlength="4" value="0" 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="0" 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.margin =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 > 300){VV.value = 300;Mtb();return false;} if(charCode == 45 ){return true;} if (charCode > 31 && (charCode < 48 || charCode > 57)) {Mtb();return false;} Mtb();return true; } </script>

00

#CSS margin#margin 外距距離#margin-top#margin-right#margin-bottom#margin-left#外邊界距離