实例
<style> /*禁止全部默认外边距,内边距*/ *{margin:0;padding:0;} .box{ margin-top:20px; margin-right:15px; margin-bottom:10px; margin-left:5px; background-color: aquamarine; width:300px ; height: 300px; padding-top:5px; padding-right: 10px; padding-bottom:15px; padding-left:5px; border-top: 1px solid black; border-right: 3px dotted black; border-bottom: 5px double black; border-left: 7px dashed black; /*border:10px groove red;*/ /*border-style:groove;*/ } .box1{ background-color: #888888; width: 200px; height: 200px; margin:20px; padding: 20px; } .box2{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div class="box"> <div class="box1"> <div class="box2"></div> </div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
浅析margin(外边距),border(边框),padding(内边距)
一个完整的div 从内到外顺序依次为:content -> padding -> border -> margin
padding:从内容到内边框的距离;
margin:从外边框到其他同级或父级元素之间的距离
margin , padding , border 相同之处
设置顺序 依次为 上 -> 右 -> 下 -> 左