`
leonardleonard
  • 浏览: 801641 次
社区版块
存档分类
最新评论

何时使用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可以解决。

分享到:
评论

相关推荐

    Alignment、Margin 和 Padding 概述

    以下是一个具体的示例,展示了如何使用 `HorizontalAlignment`、`Margin` 和 `Padding` 属性来实现精确的布局效果: ```csharp // 创建应用的主窗口 var mainWindow = new Window(); mainWindow.Title = "Margins, ...

    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

    **何时使用padding而非margin** `padding`是在元素内容与边框之间的空间,常用于调整元素内部的间隔。如果需要保持元素与其他元素的相对位置不变,同时增加内部空间,应使用`padding`。而`margin`用于调整元素与...

    dhy1994#Blog#何时使用margin和padding1

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

    padding和margin区别

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

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

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

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

    - 使用`padding`而非`margin`可以使元素看起来更加紧凑,因为`padding`内部的空间是可见的。 #### 五、`margin`与`padding`的区别 虽然`margin`与`padding`都可以用来创建元素间的空白,但它们之间存在明显的区别...

    android_中_padding与margin

    通过以上示例可以看出,`padding`与`margin`的合理搭配使用可以有效地控制视图内外部的空间布局,从而达到美观、协调的效果。 #### 四、使用技巧 **1. Padding的使用建议** - 当需要确保视图内部的内容有足够的...

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

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

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

    CSS学习笔记 - Class与ID区别、margin和padding区别 ...Class和ID、margin和padding都是CSS学习中的基本概念,它们的区别和使用场景非常重要。合理使用这些概念,可以使页面的布局更加美观和简洁。

    常用元素默认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(内边距)的使用.zip

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

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

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

    你真的了解margin吗?你知道margin有什么特性吗?

    什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以...

    css中padding和margin的异同点介绍

    总结而言,padding和margin是CSS布局中经常使用的属性,通过精确控制元素的内边距和外边距,可以实现页面布局的美观和功能性。了解两者的异同点,有助于我们在实际开发中作出更为合理的布局决策。

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

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

Global site tag (gtag.js) - Google Analytics