`
wzping
  • 浏览: 103079 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

margin和padding的比较

阅读更多


margin和padding的意义相信大家都很清楚,可是在具体应用中,到底应该使用哪一个,就比较难于判断了。 这篇文章 说得挺清楚的,在这里翻译一下,供参考。

何时应当使用margin

需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。
何时应当时用padding

需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。
浏览器兼容性问题

在IE 5.x、IE6中,为float的盒子指定margin时,左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

  • 大小: 27.3 KB
分享到:
评论

相关推荐

    Alignment、Margin 和 Padding 概述

    ### Alignment、Margin 和 Padding 概述 在 Windows Presentation Foundation (WPF) 开发过程中,对元素进行精确定位是一项至关重要的任务。为了更好地理解和运用这些技术,本篇将详细介绍 `HorizontalAlignment`、...

    Css padding和margin区别

    这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...

    CSS的margin和padding

    **CSS的margin和padding详解** **Margin是什么** 在CSS中,`margin`是一个非常重要的属性,它用于定义元素周围的空间,即元素与元素之间或元素与容器边界的距离。`margin`是透明的,不会影响元素本身的颜色或背景...

    padding和margin区别

    padding和margin区别 padding和margin区别 padding和margin区别padding和margin区别

    css中padding、margin两个重要属性的详细介绍及举例说明

    ### CSS中的Padding与Margin属性详解 #### 一、引言 在前端开发中,CSS(层叠样式表)是用于定义HTML文档外观的核心技术之一。其中,`padding`与`margin`是两个至关重要的属性,它们直接影响着网页元素的空间布局...

    HTML中padding和margin的区别,代码加详解

    在上面的代码中,我们使用了 `#container` 和 `#text` 两个元素来演示 padding 和 margin 属性的使用。`#container` 元素的 padding 设置为 `10px`,margin 设置为 `0 auto`,这意味着元素水平居中,垂直方向上没有...

    android_中_padding与margin

    ### Android中的Padding与Margin详解 在Android开发过程中,布局设计是一项非常重要的工作。合理的布局能够提升应用的用户体验,而`padding`与`margin`作为控制视图间距的关键属性,在实现美观且符合逻辑的设计中...

    设置margin和padding为0可去掉DIV与DIV的空白

    在本段中,我们将详细探讨如何通过调整margin和padding属性来消除之间的空白间隙,以及使用overflow:hidden来进一步处理可能的问题。 首先,我们需要了解margin和padding的含义及其作用。margin指的是元素边框与其...

    Class与ID区别 margin和padding区别 CSS学习笔记

    CSS学习笔记 - Class与ID区别、margin和padding区别 在CSS学习中,有两个非常重要的概念:Class与ID和margin与padding。虽然它们都是CSS中的基本概念,但是许多初学者却不知道它们的区别和使用场景。 Class与ID...

    常用元素默认margin和padding值问题探讨

    而在这些视觉样式定义中,margin(外边距)和padding(内边距)是非常常用的两个属性,它们用于调整元素与元素之间的空间以及元素内容与元素边界之间的空间。由于不同的浏览器可能会有不同的默认样式,因此开发者在...

    CSS中margin和padding的区别浅析

    下面讲解 padding和margin常用的用法 一、padding 1、语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)...

    margin,padding综合运用,用途:适合新手学习

    前端新手网页练习,内容关键词:H5,HTML5,CSS,技术关键词:div,margin,padding,用途:一个完整的页面代码,包含css样式,适合新手学习。html+css实现简单网页效果源码,尚且没有复杂的后台,给前端新手学习之用。

    dhy1994#Blog#何时使用margin和padding1

    1.需要在 border 外侧添加空白时 2.空白处不需要背景(色)时 3.上下相连的两个盒子之间的空白,需要相互抵消时,如 15px+20px 的 margi

    css中padding和margin的异同点介绍

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

    盒模型的介绍,以及margin(外边距)padding(内边距)的使用.zip

    - **百分比值**:`padding`和`margin`可以使用百分比值,相对于父元素的宽度(对于`margin`,在大多数情况下是这样),这在响应式设计中非常有用。 - **自动值**:`margin`和`padding`可以设置为`auto`,这通常用于...

    SASS-Margin-and-Padding-Starter:OOCSS的全局边距和填充结构

    创建接口时,最重要的部分之一就是间距( margin和padding )。 一致的单位对于Web应用程序的统一,平衡和节奏至关重要。 单位空间是为您的项目生成一致间距的基础,无论系统中可能需要多少变化。 Sass 3.3.x中内置...

    09_盒子模型-padding和margin对比.html

    09_盒子模型-padding和margin对比

    各浏览器padding、margin的差异

    在网页设计与开发过程中,经常遇到的一个问题是不同浏览器对CSS属性(如`padding`和`margin`)的解释存在差异。这种差异可能导致页面布局在不同浏览器中的表现不一致,进而影响用户体验。本文将详细探讨各浏览器中`...

Global site tag (gtag.js) - Google Analytics