内边距padding的意思是： 边框与内容之间的距离。
外边距margin的意思是：边框与边框之间的距离。
拓展资料外边距margin
左边距 margin-left:数值 | autoauto:即距离这个边最远的距离；
右边距: margin-right:数值 | auto；
上边距: margin-top:数值 ，这里不能用auto；
下边距: margin-bottom:数值 这里也不能用auto；
外边距的复合写法
1、margin: 0px(上) 0px(右) 0px(下) 0px(左)；
2、margin: 0px(上) 0px(左右) 0px(下)；
3、margin: 0px(上下边距) 0px(左右边距)；
4、margin: 0px(上下左右边距都是0px)；
例子：
内边距padding
padding属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值，例如：
h1 {padding: 10px 0.25em 2ex 20%}
内边距也通过使用下面四个单独的属性，分别设置上、右、下、左内边距
padding-top 上内边距；
padding-right 右内边距；
padding-bottom 下内边距；
padding-left 左内边距；
例如：
h1 {
padding-top: 10px
padding-right: 0.25em
padding-bottom: 2ex
padding-left: 20%
}
样式：<style type="text/css">
body{width: 100%text-align: center}/*把body的文本设置为居中对齐*/
div{width: 100pxheight: 40pxborder: 1px solid reddisplay: inline-block}/*将三个div都设置为行内块元素，这样div就既保留了块的样式，又能体现为文本的在一行中显示的样式*/
#box2{margin: 0px 10px}/*将中间那个div的两边边距都设置为10px，就达到了中间间隔为10px的效果*/
</style>
代码：
<body>
<div id="box1">我是第一个div</div>
<div id="box2">我是第二个div</div>
<div id="box3">我是第三个div</div>
</body>
设置两个div之间的间距的方法：
先定义两个div，div里面分别有一段话。
2.分别给两个div加上不同的背景色，方便看到div的位置。
3.设置div的margin；使两个div之间的间距扩大。
这样让两个div之间的间距扩大的问题就解决了。
扩展资料：
div常用属性
1.Height:设置DIV的高度；Width:设置DIV的宽度。
2.margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]
3.padding:用于设置DIV的内边距（内如子元素与DIV边界的距离）。padding:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；
4.border:设置DIV的边框样式；
5.background:设置DIV的背景样式；background后可直接跟背景的颜色、背景图片、平铺方式等样式。
6.position:设置DIV的定位方式。position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。
7.display:设置显示属性。其值有block、none；
8.float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none；
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）