css控制边界与边框⽰例（内边距、外边距使⽤⽅法）这篇⽂章主要介绍了css控制边界与边框⽰例，需要的朋友可以参考下
⼀、CSS控制边界
1、内边距
padding（内边距也叫内填充）
padding-bottom 长度/百分⽐元件下端边线的空隙
padding-left 长度/百分⽐元件左端边线的空隙
padding-right 长度/百分⽐元件右端边线的空隙
padding-top 长度/百分⽐元件上端边线的空隙
简易写法：
padding:10px ⼀个值表⽰同时控制四个⽅向
padding:2px 4px  两个值表⽰第⼀个值控制上下第⼆个值控制左右
padding:2px 6px 10px 三个值表⽰第⼀个值控制上第⼆个值控制右和左第三个值控制下左边右边
padding:1px 2px 3px 4px  四个值表⽰每个值单独控制上右下左
2、外边距
margin（外边界）属性介绍
margin-bottom auto ⾃动调整空隙长度/百分⽐设置下端空隙
margin-left auto ⾃动调整空隙长度/百分⽐设置左端空隙
margin-right auto ⾃动调整空隙长度/百分⽐设置右端空隙
margin-top auto ⾃动调整空隙长度/百分⽐设置上端空隙
简化⽅案：
margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#0F0;
margin:100px;
padding:10px;
}
body{
margin:0px;
}
</style>
</head>
<body>
<div>
6、你不能当饭吃，但没有你，我吃不下饭。
7、要有多⼤的⾝躯，才能撑起您那龌龊的灵魂啊！
8、做男⼈的最⾼境界不是你去泡妞，⽽是让妞来泡你。
9、有⼼才会累，⽆⼼者⽆所谓。
</div>
</body>
⼆、CSS控制边框
1、设置边线的样式：border-style
none 不显⽰边线
dotted 点线
dashed 虚线
solid 实线
double 双线
2、设置边线的长度(即边框的粗细)：border-width
像素
百分⽐
3、设置边线的颜⾊：border-color
简化格式：长度样式颜⾊
设置边线的颜⾊和长度之前必须先设置边线的样式因为边线样式默认是none不显⽰边线的<style type="text/css">
img{
border-style:solid dotted double;
margin属性值可以为百分比border-color:#0F0 #C00 #FF0 #00F;
border-width:10px;
}
</style>
</head>
<body>
<img src="../../../素材库/biaoqing4.png"/>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。