css控制边界与边框示例(内边距、外边距使用方法)

时间：2021-04-16

　　一、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>
1.很好很好很好很好很好很好很好很好很好很好
2.特别好特别好特别好
</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;
border-color:#0F0 #C00 #FF0 #00F;
border-width:10px;
}
</style>
</head>
<body>
<img src="../../../img/img1.png"/>
</body>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章