html中div的外边距和内边距都是什么意思,怎么设置

html-css09

html中div的外边距和内边距都是什么意思,怎么设置,第1张

内边距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%

}

html中两个表格间的距离调整有两种适合微调的办法:

1.设置第一个tbale的margin-bottom属性。例如:

<table width="100%" style="margin-bottom:100px">表示table表格底部保持100px间距。

2.设置第二个tbale的margin-top属性。例如:

<table width="100%" style="margin-top:100px">表示table表格顶部保持100px间距。

扩展知识

margin 属性可以单独改变元素(元素可以是表格或者DIV)的上,下,左,右边距。也可以一次改变所有的属性。

margin 属性单独使用时:

例1:margin-bottom:100px;元素的下外边距为100px。

例2:margin-left:100px;元素的左外边距为100px。

例3:margin-right:100px;元素的右外边距为100px。

例4:margin-top:100px;元素的上外边距为100px。

margin 属性一次性设置所有属性:

例1:margin:10px 5px 15px 20px表示:

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

例2:margin:10px 5px 15px表示:

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

例3:margin:10px 5px表示:

上外边距和下外边距是 10px

右外边距和左外边距是 5px

例4:margin:10px表示:

所有 4 个外边距都是 10px

参考资料:

百度百科-margin-buttom

百度百科-margin-top

左边距padding.left、右边距padding.right、上边距padding.top、下边距padding.botton。html中的鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。