CSSシミュレータ（margin&padding）

【使い方】textareaの中身（値）を書き換えて色々と試してみる <style> #margin_paddingDisplay,#margin_paddingDisplay1,#margin_paddingDisplay2{border:1px solid;} #margin_paddingDisplay1❌,#margin_paddingDisplay2❌{display:inline-block;width:40%;}/*❌を削除すれば中の枠が左右に並ぶ*/ #margin_paddingDisplay { /*外の枠*/ padding: 20px ; /*内側の余白*/ padding-top: px ; /*内側の余白（上）*/ padding-right: px ; /*内側の余白（右）*/ padding-bottom: px ; /*内側の余白（下）*/ padding-left: px ; /*内側の余白（左）*/ } #margin_paddingDisplay1 { /*中の枠（上／左）*/ width: % ; /*枠サイズ（横）*/ margin: 20px ; /*外側の余白*/ margin-top: px ; /*外側の余白（上）*/ margin-right: px ; /*外側の余白（右）*/ margin-bottom: px ; /*外側の余白（下）*/ margin-left: px ; /*外側の余白（左）*/ } #margin_paddingDisplay2 { /*中の枠（下／右）*/ width: % ; /*枠サイズ（横）*/ margin: 20px ; /*外側の余白*/ margin-top: px ; /*外側の余白（上）*/ margin-right: px ; /*外側の余白（右）*/ margin-bottom: px ; /*外側の余白（下）*/ margin-left: px ; /*外側の余白（左）*/ } </style> <div id="margin_paddingDisplay1">box-top(left)</div> <div id="margin_paddingDisplay2">box-bottom(right)</div> 外枠の padding と 中枠の margin は合計して適用される
縦並びの場合、margin と margin は大きい方が適用される

HTML <div id="margin_paddingDisplay"></div><br /><br /> <⚠textarea style="width:99%;height:500px;font-family:monospace;" id="margin_paddingTextarea" onInput="margin_paddingSimulator();"> <style> #margin_paddingDisplay,#margin_paddingDisplay1,#margin_paddingDisplay2{border:1px solid;} #margin_paddingDisplay1❌,#margin_paddingDisplay2❌{display:inline-block;width:40%;}/*❌を削除すれば中の枠が左右に並ぶ*/ #margin_paddingDisplay { /*外の枠*/ padding: 20px ; /*内側の余白*/ padding-top: px ; /*内側の余白（上）*/ padding-right: px ; /*内側の余白（右）*/ padding-bottom: px ; /*内側の余白（下）*/ padding-left: px ; /*内側の余白（左）*/ } #margin_paddingDisplay1 { /*中の枠（上／左）*/ width: % ; /*枠サイズ（横）*/ margin: 20px ; /*外側の余白*/ margin-top: px ; /*外側の余白（上）*/ margin-right: px ; /*外側の余白（右）*/ margin-bottom: px ; /*外側の余白（下）*/ margin-left: px ; /*外側の余白（左）*/ } #margin_paddingDisplay2 { /*中の枠（下／右）*/ width: % ; /*枠サイズ（横）*/ margin: 20px ; /*外側の余白*/ margin-top: px ; /*外側の余白（上）*/ margin-right: px ; /*外側の余白（右）*/ margin-bottom: px ; /*外側の余白（下）*/ margin-left: px ; /*外側の余白（左）*/ } </style> <div id="margin_paddingDisplay1">box-top(left)</div> <div id="margin_paddingDisplay2">box-bottom(right)</div> <⚠/textarea><!--⚠は削除する-->

JavaScript <script> var margin_paddingSimulator=function(){ document.getElementById("margin_paddingDisplay").innerHTML=document.getElementById("margin_paddingTextarea").value; } onLoad=margin_paddingSimulator(); </script>