知方可补不足~CSS中margin,padding,border-style有几种书写规范

简介:

参考文章:

http://www.w3school.com.cn

在我们使用CSS时,经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义呢,在WEB标准中,它们会有以下含义,它适合于CSS中的margin,padding,border-style等属性

第一种情况,四个值都有,它们的含义如下

属性:上  右  下  左

第二种情况,只有三个值,它们的含义如下

属性:上  右左  下

第三种情况,只有两个值,它们的含义如下

属性:上下  右左

第四种情况,只有一个值,它们的含义如下

属性:上下右左

注意,如果属性值为0,可以不加单元

直接是属性:0;

如果不为0,则必须加单元

如属性:10px;

下面是w3school中所举的例子,我直接拿来主义了,呵呵

例子 1

border-style:dotted solid double dashed; 

    上边框是点状
    右边框是实线
    下边框是双线
    左边框是虚线

例子 2

border-style:dotted solid double;

    上边框是点状
    右边框和左边框是实线
    下边框是双线

例子 3

border-style:dotted solid;

    上边框和下边框是点状
    右边框和左边框是实线

例子 4

border-style:dotted;

    所有 4 个边框都是点状



例子 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



例子 1

padding:10px 5px 15px 20px;

    上内边距是 10px
    右内边距是 5px
    下内边距是 15px
    左内边距是 20px

例子 2

padding:10px 5px 15px;

    上内边距是 10px
    右内边距和左内边距是 5px
    下内边距是 15px

例子 3

padding:10px 5px;

    上内边距和下内边距是 10px
    右内边距和左内边距是 5px

例子 4

padding:10px;

    所有 4 个内边距都是 10px

 本文转自博客园张占岭(仓储大叔)的博客,原文链接:知方可补不足~CSS中margin,padding,border-style有几种书写规范,如需转载请自行联系原博主。

目录
相关文章
|
5月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
173 4
|
21天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
4月前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
209 44
|
3月前
|
前端开发
css实用技巧——利用内联元素的padding实现高度可控的分隔线
css实用技巧——利用内联元素的padding实现高度可控的分隔线
20 2
|
3月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
40 1
|
3月前
|
前端开发 容器
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
63 1
|
3月前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
29 0
|
4月前
|
前端开发
CSS行内样式书写规范及注意事项
CSS行内样式书写规范及注意事项
|
5月前
|
前端开发
CSS padding(填充)
CSS padding(填充)。
42 1
|
5月前
|
前端开发
CSS margin
CSS margin。
34 1