html设置内外边距,css 内外边距如何使用？

css 内外边距如何使用？下面本篇文章给大家介绍一下CSS padding(内边距)、margin(外边距)的使用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

padding 内边距

padding 属性用来指定元素的内容与元素边框之间的空隙。

padding 属性的单位通常是像素，也可以是EM和百分比。

如果使用百分比，内边距就是浏览器窗口的一个百分比。

如果一个盒子的宽度已经指定，后面再添加内边距，原来盒子的整体大小会增大。

如下面的示例：

内边距padding

p{

width:300px;

border:2px solid #333;

}

p.one{

padding:10px;

}

测试文本！

测试文本！测试文本！

效果图：

内边距还有4个方向的属性，分别指明4个内边。padding-top

padding-right

padding-bottom

padding-left

这样排序的序列是因为padding属性的快捷试写法指定的值是按这样的序列的。

分别为4个内边距设置不同的数值，可以做不不规则的外观。

示例：

不规则内边距padding

p{

width:300px;

border:2px solid #333;

}

p.one{

padding-top:20px;

padding-right:30px;

padding-bottom:10px;

padding-left:50px;

}

测试文本！

测试文本！测试文本！

margin 外边距

margin 属性用来指定盒子之间的空隙。

margin 属性的单位通常是像素，也可以是EM和百分比。

如果使用百分比，外边距就是浏览器窗口的一个百分比。

如果一个盒子的宽度已经指定，后面再添加外边距，原来盒子的整体大小会增大。

两个一样大小的盒子，有外边距的盒子会多出空隙。

示例：

外边距margin

p{

width:300px;

border:2px solid #333;

padding:10px;

}

p.one{

margin:10px;

}

测试文本！

测试文本！测试文本！

下面的盒子有外边，上面的盒子没有外边，放在一起就产生了折叠效果。

外边距在页面排版细节处理上特别有用，如一点细微调整、对齐等。

外边距还有4个方向的属性，分别指明4个外边。margin-top

margin-right

margin-bottom

margin-left

这样排序的序列是因为margin属性的快捷试写法指定的值是按这样的序列的。

分别为4个外边距设置不同的数值，可以做不不规则的外观。

示例，略，大家可以尝试下。

内容居中

居中是排版中常见的需求，有文本居中对齐，盒子居中对齐。

盒子居中对齐很简单，只要将margin-left和margin-rigth的值设置为auto即可。

如果要盒子在页面中居中，需要为盒子指定一个宽度。

示例：

盒子居中

p{

width:300px;

border:2px solid #333;

padding:10px;

margin-top:100px;

margin-left:auto;

margin-right:auto;

}

测试文本！测试文本！

更多web前端知识，请查阅 HTML中文网 ！！