博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS中margin和padding的区别
阅读量:5887 次
发布时间:2019-06-19

本文共 1044 字,大约阅读时间需要 3 分钟。

本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距.

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

 

下面讲解 padding和margin常用的用法

 

一、padding

 

1、语法结构

(1)padding-left:10px; 左内边距

(2)padding-right:10px; 右内边距

(3)padding-top:10px; 上内边距

(4)padding-bottom:10px; 下内边距

(5)padding:10px; 四边统一内边距

(6)padding:10px 20px; 上下、左右内边距

(7)padding:10px 20px 30px; 上、左右、下内边距

(8)padding:10px 20px 30px 40px; 上、右、下、左内边距

 

2、可能取的值

(1)length  规定具体单位记的内边距长度

(2)%       基于父元素的宽度的内边距的长度

(3)auto    浏览器计算内边距

(4)inherit 规定应该从父元素继承内边距

 

3、浏览器兼容问题

(1)所有浏览器都支持padding属性

(2)任何版本IE都不支持属性值“inherit”

 

 

二、margin

 

1、语法结构

(1)margin-left:10px; 左外边距

(2)margin-right:10px; 右外边距

(3)margin-top:10px; 上外边距

(4)margin-bottom:10px; 下外边距

(5)margin:10px; 四边统一外边距

(6)margin:10px 20px; 上下、左右外边距

(7)margin:10px 20px 30px; 上、左右、下外边距

(8)margin:10px 20px 30px 40px; 上、右、下、左外边距

 

2、可能取的值

(1)length  规定具体单位记的外边距长度

(2)%       基于父元素的宽度的外边距的长度

(3)auto    浏览器计算外边距

(4)inherit 规定应该从父元素继承外边距

 

3、浏览器兼容问题

(1)所有浏览器都支持margin属性

(2)任何版本IE都不支持属性值“inherit”

 

 

三、margin和padding的区别用图表示为

 

转载地址:http://yngix.baihongyu.com/

你可能感兴趣的文章
调用约定__stdcall / __cdecl
查看>>
occActiveX - ActiveX with OpenCASCADE
查看>>
redmine
查看>>
css 序
查看>>
DirectshowLib摄像头拍照的”未找到可用于建立连接的介质筛选器组合“ 解决办法...
查看>>
wcf-1
查看>>
三种简单排序
查看>>
[Java]读取文件方法大全
查看>>
【NopCommerce源码架构学习-二】单例模式实现代码分析
查看>>
动态规划大合集II
查看>>
MySQL忘记密码后重置密码(Mac )
查看>>
web.xml中的url-pattern映射规则
查看>>
图像的下采样Subsampling 与 上采样 Upsampling
查看>>
SQL 数据类型
查看>>
支付宝接口调用,支付操作
查看>>
如何在ashx页面获取Session值 (仅供个人参考)
查看>>
cookie与session
查看>>
Linux经常用到的命令以及快捷键
查看>>
计算题:挣值、预测、沟通、盈亏平衡点、
查看>>
js 实现 aop
查看>>