博客列表 >一个盒子的border padding margin的用法 简写用法 7.4

一个盒子的border padding margin的用法 简写用法 7.4

耿玉洁的博客
耿玉洁的博客原创
2019年07月07日 12:32:29516浏览

写代码的时候 经常会用到简写方法

padding的正常写法

padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;

简写方式:

padding: 20px 30px 40px 50px;  方向是:上右下左

如果上下一样 则  padding: 20px 30px 50px;

如果左右一样 则  padding: 20px 30px 40px;

如果上下数值一样,左右数值一样,但上下与左右数值又不一样 则  padding: 20px 30px;

如果全部一样 则 padding: 20px;

margin的方式与padding一致

border的正常写法

border-top-style: solid;
border-top-color: red;
border-top-width: 5px;

border-right-style: solid;
border-right-color: red;
border-right-width: 5px;

简化写法

border-top: 5px solid red;

如果上下左右都一样则 border:5px solid red;


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议