黑马程序员技术交流社区

标题: 【广州校区】【原创】初学者如何区分外边距和内边距 [打印本页]

作者: 新君 时间: 2019-6-5 15:40
标题: 【广州校区】【原创】初学者如何区分外边距和内边距
1 概念一个网页中的所有内容，都可以看作一个个独立的盒子，在网页中不同的位置，组合而成的。
为了定位这个盒子在网页中的位置，可以使用外边距和内边距这二个技术。

外边距：强调一个盒子与另一个盒子的位置关系，即对外关系
内边距：强调一个盒子与其自己内部内容的位置关系，即对内关系
因为网页中的盒子有的是平行关系，有的是嵌套关系，所以外边距和内边距也是一个相对概念。

2 图示

3 作用
我们可以通过设置网页中某个盒子的外边距和内边距来控制这个盒子在网页中的位置，以及这个盒子内部内容的位置，从而达到用户需求。

4 常用属性

margin: 设置盒⼦与其它盒⼦四周的外边距
[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ] ：分别设置盒⼦与其它盒⼦某一边的外边距
padding: 设置盒⼦与其内部内容四周的内边距
[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]：分别设置盒⼦与其内部内容某一边的内边距

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2