css之margin && padding讲解
2024-09-27 15:01:06
margin && padding盒子模型：
margin是模块与模块的空隙，padding是内容与边框的空隙
注：
1.margin：边缘、空白
2.padding：填充
margin：
|
属性
|
描述
|
|---|---|
|
简写属性。在一个声明中设置所有外边距属性。[1]
|
|
|
设置元素的下外边距。
|
|
|
设置元素的左外边距。
|
|
|
设置元素的右外边距。
|
|
|
margin-top
|
设置元素的上外边距。
|
语法结构
margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距
注释：允许使用负值。
语法举例
例子 1margin:10px 5px 15px 20px;上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2margin:10px 5px 15px;上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3margin:10px 5px;上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4margin:10px;所有 4 个外边距都是 10px
|
默认值：
|
0
|
|---|---|
|
继承性：
|
no
|
|
版本：
|
CSS1
|
|
JavaScript 语法：
|
object.style.margin="10px 5px"
|
实例
设置 p 元素的 4 个外边距：
p { margin:2cm 4cm 3cm 4cm; }
浏览器支持
所有浏览器都支持 margin 属性。
注释：任何的版本的 Internet Explorer（包括 IE8）都不支持属性值 "inherit"。
可能的值
|
值
|
描述
|
|---|---|
|
auto
|
浏览器计算外边距。
|
|
length
|
规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
|
|
%
|
规定基于父元素的宽度的百分比的外边距。
|
|
inherit
|
规定应该从父元素继承外边距。
|
padding：
语法结构
|
1
2
3
4
5
6
7
8
|
padding-top:20px;上内边距padding-right:30px;右内边距padding-bottom:30px;下内边距padding-left:20px;左内边距padding:1p四边统一内边距padding:1px1px上下,左右内边距padding:1px1px1px上,左右,下内边距padding:1px1px1px1px上,右,下,左内边距 |
注释：不允许使用负值。
浏览器支持
所有浏览器都支持 padding 属性。
注释：任何的版本的Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值
|
值
|
描述
|
|---|---|
|
auto
|
浏览器计算外边距。
|
|
length
|
规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
|
|
%
|
规定基于父元素的宽度的百分比的外边距。
|
|
inherit
|
规定应该从父元素继承外边距。
|
最新文章
- 折腾一两天，终于学会使用grunt压缩合并混淆JS脚本，小激动，特意记录一下+spm一点意外收获
- 【转】tomcat7性能调优
- MySQL Cluster 配置文件(config.ini)详解
- The design of a distributed variant of Plato framework to support collaborated editing
- 码农谷 找出N之内的所有完数
- poj 2013 Symmetric Order 解题报告
- Oracle 表死锁 解决
- typedef block
- C#——中文转化成拼音
- 【Java】Java运行cmd命令直接导出.sql文件
- python Tips(不定期更新）
- 使用ConcurrentDictionary实现轻量缓存
- 权威验证：MSDN会明确告诉你下载的光盘镜像是否正宗微软原版
- Copy_on_write的简单实现
- angular学习（四）-- Controller
- unix命令
- JavaScript初探之AJAX的应用
- c++ 获取磁盘句柄
- Mac pro 装双系统 参考
- 20165321 测试-3-ch02