盒模型中padding、border、margin的区别

在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示:

其中包含了四部分内容:element/元素(即图中文字)、padding/内边框(图中两个红色边框之间白色部分)、border/边框(蓝色区域)、margin/外边框(图中两绿色边框中间白色部分)。

区别:

  1. element占据的就是字体本身的字号大小;
  2. padding和margin 类似,指的是一段距离,只能设置上、下、左、右方向的一段长度,不能设置区域颜色;
  3. 而border指的是一块区域,可以设置上下左右方向的长度,而且可以设置这段空间的颜色上下
  4. padding、border、margin三者都可以对上、下、左、右四个方向设置不同的宽度。

下面对各项的语法规则做一个简单对比            

font-size: 20px;	          /*设置element的字号*/
padding-top:20px;		/*设置padding上框高度*/
padding-right:30px;		/*设置padding右框宽度*/
padding-bottom:40px;	     /*设置padding下框宽度*/
padding-left:50px;		/*设置padding左框宽度*/
margin: T R B L;		/*与padding用法基本相同,此处示例四个方向边框宽度的合并设置语法规则*/
border: size style color;	/*border也可像padding和margin设置不同方向边框的宽度,此处示例对border 一步设定大小、风格(斜体)、颜色。*/

  

时间: 2024-10-11 03:26:58

盒模型中padding、border、margin的区别的相关文章

Android 中padding和margin的区别

区别 padding是在控件内部的 margin是在控件外部的 如图所示,红线区域是margin,黑线区域是padding 下面是TextView的各种 padding,margin的使用效果 这里宽高全是wrap_content <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android

HTML中padding和margin的区别和用法

 margin(外边距) 定义:margin是用来隔开元素与元素的间距,发生在元素本身的外部,margin用于布局分开元素使元素与元素互不相干. 提示:margin: top right bottom left;(margin:10px 20px 30px 40px) 它的给值方式为上,右,下,左. 建议何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的margin,将得到20px的

沙盒模型中各文件夹及操作

某个iphone工程进行文件操作有此工程对应的指定的位置,不能逾越. iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. documents,tmp,app,Library. (NSHomeDirectory()), 手动保存的文件在documents文件里 Nsuserdefaults保存的文件在tmp文件夹里 Documents 目录:您应该将所有de应用程序数据文件写入到这个目录下.这个目录用于存储用户数据或其它应该定期备份的信

android中padding和margin的理解

在android安排控件布局时,padding和margin经常被用到. 其具体解释可以通过一张图展现,如下, 两个属性表示的意义与web编程相同. 深入理解: padding约束的是控件或布局显示的内容距离边框的距离,沿垂直边框向内压缩,padding越大,内容显示控件越小: margin这是沿垂直边框向外延伸的距离, 它的意思就是给控件加了一个一定距离的空白边,显示效果只与值大小正负相关,与其他元素边界无关. 值得注意的是,padding值的范围[0,任意正数](默认为0),而margin的

css中padding与margin

CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,paddin

padding和margin的区别,以及其存在的bug和消除方法!

margin是盒模型的外边距,padding是盒模型的内边距: 用margin时,最好给父级元素加上overflow:hidden:(溢出隐藏) 用padding时,最好给自身加上box-sizing:border-box:(固定边框) margin的bug: 1. IE6中浮动元素3px间隔Bug: 发生场合:发生在一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug. 解决方法:右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从

padding和margin的区别和作用及各种场合出现的bug

一.padding Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离 1.语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10px; 四边统一内边距

关于padding与margin的区别

代码一:全为padding. <!doctype html><html><head>    <meta charset="UTF-8">    <title>margin||padding</title>    <style type="text/css">#div1{    width: 800px;    background-color: red;    padding: 20

4 盒模型 padding/border/margin

css model 设计和布局时使用 包括: 外边距 ,边框,内填充和实际内容 常用属性 1 宽高 2 内边距 padding  盒子边框到内容的距离 3 外边距 margin <meta charset="utf-8"> <title>margin</title> <style type="text/css"> span{ background-color: red; } .盒子一{ margin-right: 20