`
niulanshan
  • 浏览: 564043 次
文章分类
社区版块
存档分类
最新评论

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”

三、两者的异同点,如图所示:







分享到:
评论

相关推荐

    css中padding和margin的异同点介绍

    本文将从语法结构、可能取的值、浏览器兼容性等方面详细介绍padding和margin的异同点,并结合图示提供直观的理解。 一、padding(内边距) 1、语法结构 padding属性用于定义元素内容与其边框之间的空间。其基本...

    web前端面试题

    - 行内元素可以设置 padding 和 margin,但 margin 的 top 和 bottom 仅影响其周围的元素。 **23. 什么是外边距重叠?重叠的结果是什么?** - 外边距重叠是指当两个垂直外边距相遇时,它们合并为一个外边距的现象...

    HTML中div与span的区别(共同点与不同点)

    了解它们的共同点和不同点对于网页设计和开发至关重要。 共同点: 1. **整体处理**:无论是 `div` 还是 `span`,它们都是用来对内容进行分组的标签。这使得我们可以对这些分组的内容作为一个整体来应用样式,如CSS...

    安卓课程内容复习1

    2. dp、sp 和 px 的异同点: - dp (density-independent pixels):密度无关像素,是一种抽象单位,用于跨不同设备分辨率的尺寸计算。 - sp (scale-independent pixels):可缩放像素,主要用于字体大小,会根据用户...

    WEB前端面笔试题总结 2.docx

    3. margin 和 padding 的区别 margin 是外边距,属于元素之外,相邻元素的 margin 可以融合。padding 是内边距,在元素之内,相邻元素的 padding 不可融合。 4. 检测变量类型 可以使用 typeof 运算符来检测变量的...

    javascript面试题

    - 行内元素可以设置左右 `margin` 和 `padding`,但上下 `margin` 和 `padding` 仅影响元素内部空间,不影响其他元素。 **25、什么是外边距重叠?重叠的结果是什么?** 外边距重叠发生在相邻的两个元素之间,当两...

    面试宝典之吊打面试官系列

    - **答案**: 盒子模型由内容、填充(padding)、边框(border)和外边距(margin)四部分组成。 **33. 样式初始化的重要性** - **问题**: 为什么要初始化样式? - **答案**: 初始化样式是为了消除浏览器默认样式的差异,...

    笔试题(JavaEE).doc

    2. CSS的盒子模型:CSS的盒子模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin),描述了元素占用的空间。 3. CSS的样式表分类:CSS分为内部样式表(在HTML文档内部定义)、外部样式表(链接到...

    前端面试题汇总

    - **行内元素的padding和margin**:只能设置左右边距和填充,上下无效。 **23. 外边距重叠** - 当两个相邻的块级元素的外边距发生重叠时,实际应用的外边距为两者中的最大值。 - 解决方案:通过设置 `clear:both;` ...

    CSS3知识点归纳

    - **过渡和动画之间的异同** - 过渡是自动的,当元素的状态发生改变时触发。 - 动画则需要明确地定义关键帧,通过`@keyframes`规则定义。 - **创建步骤** - 定义关键帧动画规则:`@keyframes myAnimation { from ...

Global site tag (gtag.js) - Google Analytics