CSS中margin和padding的区别

简介:

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”

 


本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/5780702.html,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
1月前
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中,这些概念相互关联,共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系,以便更好地进行网页设计和优化,确保在各种设备上都能提供良好的用户体验。
|
6月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
65 1
WK
|
3月前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
61 3
|
2月前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
41 0
|
4月前
|
前端开发
css中px和em的区别
css中px和em的区别
65 0
|
4月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
5月前
|
前端开发
css实用技巧——利用内联元素的padding实现高度可控的分隔线
css实用技巧——利用内联元素的padding实现高度可控的分隔线
32 2
|
5月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
49 1
|
5月前
|
前端开发 容器
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
149 1