《css秘籍》-第七章-上(margin、padding)_html/css_WEB-ITnose
程序员文章站
2022-06-02 09:42:04
...
- padding是指与其边框线之间的空间
- border是指盒子周边的直线
- background-color是用来填充边框内部空间的
- margin是指一个标签和另外一个标签之间的间隔。
默认是这样的,但是由于不同的浏览器会给相同的标签提供不同的padding和margin,因此最好将所有标签的padding和margin都置零
用margin和padding控制空间
padding是在内容和边框之间增加空间,padding占用的空间也可以为空白内容,但他仍然会填满背景色或者图片,margin则是在元素之间增加空白,所有有时候看到增加margin之后,会多了空白的沟槽。
margin可以用百分比进行布置,例如
假设这个div就是在html的body的一个div,这样的话这个div会始终保持增加距离浏览器左边%20的间距和距离浏览器右边%20的间距。这种做法很适合在做一些适配浏览器尺寸的操作。
margin和padding可以使用快捷属性:
例如
margin: 0 10px 20px 30px;
这个配置的参数从左到右是,上边,右边,下边,左边的margin。
快捷方式很方便设置4个方向的值。
边距冲突
当元素的margin-bottom碰到另外一个元素的margin-top的时候,浏览器并不是将他们相加,而是应用他们中较大的一个。这时候就会很奇怪,所以应该使用padding-top或者padding-bottom。
margin负值
margin的正值是增加元素之间的空间,而负值是移除他们之间的空间。所以通过设置margin的负值可以很简单的将元素移动到想要的位置。
未经允许不得转载:神一样的少年 » 《css秘籍》-第七章-上(margin、padding)
推荐阅读
-
HTML CSS--margin和padding的学习_html/css_WEB-ITnose
-
《css秘籍》-第七章-上(margin、padding)_html/css_WEB-ITnose
-
CSS 有关margin padding_html/css_WEB-ITnose
-
div+css布局之padding和margin的使用,及自适应100%的宽度_html/css_WEB-ITnose
-
《css秘籍》-第七章-上(margin、padding)_html/css_WEB-ITnose
-
巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)_html/css_WEB-ITnose
-
1.padding和margin,几种参数_html/css_WEB-ITnose
-
padding对于margin的影响简单介绍_html/css_WEB-ITnose
-
HTML中行内元素的竖直方向的padding和margin是否真的无效_html/css_WEB-ITnose
-
div+css布局之padding和margin的使用,及自适应100%的宽度_html/css_WEB-ITnose