边框(border)边距(margin)和间隙(padding)属性的区别

区别

  边框属性(border)用来设定一个元素的边线。
  边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
  间隙属性(padding)是用来设置元素内容到元素边界的距离。
  这三个属性都属于CSS中box类型的属性。

  下面这个示意图,很形象地体现了三者之间的区别。

  这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。

时间: 2024-07-28 20:29:13

边框(border)边距(margin)和间隙(padding)属性的区别的相关文章

边框(border)边距(margin)和间隙(padding)属性的区别_CSS/HTML

边框属性(border)用来设定一个元素的边线. 边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离. 间隙属性(padding)是用来设置元素内容到元素边界的距离. 这三个属性都属于CSS中box类型的属性. 下面这个示意图,很形象地体现了三者之间的区别. 这里提供一张盒模型的3D示意图,希望便于你的理解和记忆.

border、margin、padding属性的区别

可以先看下这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml 本文参考:http://www.cnblogs.com/chinhr/archive/2008/06/20/1227084.html               http://www.cnblogs.com/time-is-life/archive/2008/01/21/1046817.html              http://www.cnblogs.com/tian

CSS3中清除外边距、内边距margin,padding使用方法

建议给html页面创建样式时,首先添加如下CSS样式,将所有的元素内外间距都设为0: {     margin: 0px;     padding: 0px; } 因为如果我们不明确定义,由于不同浏览器处理策略不同,有的默认间距就设为0,而有的却有默认值.这样就会造成不同浏览器下显示的差异. 例子 去除html标签默认的外边距margin和内边距padding body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,

css网页布局用Margin还是用Padding

用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.--W3School 边界(margin):元素周围生成额外的空白区."空白区"通常是指其他元素不能出现且父元素背景可见的区域.--CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的"补白"(或

ul-css/padding属性如何禁用

问题描述 css/padding属性如何禁用 问题描述: 为了使ul-li居中对齐,采用text-align:center + display:inline方法 然而网上简单好用的方法拿到实际工作中就各种失效.最后检查问题发现了原因 这是正确的情况: 这是错误的情况: 竟然只需要将padding:0这个属性禁用掉就好了! 1.不理解为什么,padding:0应该是一个人畜无害的属性才对啊 2.怎么办,既不可能去修改公用的css样式,也不可能不引入这个css文件 css不存在"解除一个属性定义&q

CSS学习笔记Padding 属性中参数的定义与使用_经验交流

一直都对CSS中Padding 属性中参数个数的定义颇为困惑,例如: body { padding: 32px;} body { padding: 32px 24px; } body { padding: 32px 24px 18px; } body { padding: 32px 24px 18px 12px; } 今天baidu查看了CSS的标准文档,其中是这样规定的: 如果只提供一个,将用于全部的四条边: 如果提供两个,第一个用于上-下,第二个用于左-右: 如果提供三个,第一个用于上,第二

duilib 修复padding属性导致其他控件自动计算宽高度错误的bug和导致自己宽高度错误的bug

转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42950733          BUG 一:padding导致其他控件宽度计算错误             今天在写项目的一个布局时,用到了最常用的相对布局属性padding:在一个纵向容器里,给其中的各个子元素设置了padding属性来做相对布局.但是出现了很奇怪的现象:容器的最后一个元素本应该在最底部,但是实际却留出了一部分空白.          实际上这个bug

ie6 文字溢出bug(注释bug) 双倍边距(margin)的bug 宽度100%问题解决方法

1.在以下情况下将会引起文字溢出bug 一个容器包含2两个具有"float"样式的子容器. 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3 在第二个容器前存在注释(这也是为什么此bug也叫做"IE6注释bug"的原因). 2.引起bug时的效果图                 这是正常效果        IE6下却多了一个"怪"字,真是怪   3.修复该bug的解决方案 改变结构,不出现[一个容器包含2两个具有&q

详细学习CSS的Margin和Padding属性

css margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. 例子h2: h2 {    font-size: 1.5em;    background-color: #ccc;    margin: 1em;    padding: 3em;} 元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding