可以先看下这个视频教程：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/tianyue3107/archive/2009/04/22/1441358.html

1.Margin

用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离.

2.Padding

用来设置元素内容到元素边界的距离。

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        .list1

        {

            width:580px;

            height:50px;

            background-color:Red;

            margin-bottom:100px;

            padding-left:10px;

            padding-right:10px;

            padding-top:10px;

        }

        .list2

        {

            width:600px;

            height:60px;

            background-color:Green;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div id="div1" class="list1">

     Div1这里 width:580px;需要用600px-10px-10px（ padding-left; padding-right）,才能DIV2的600px保存一致。<br/>

     Div1这里 height:60px;需要用60px-10px(减除 padding-top的内边距距离)，才能高度和DIV2的60ox保持一致。

    </div>

     <div id="div2" class="list2">

     我的 width:600px;  height:30px;

    </div>

    </form>

</body>

</html>

　　

border、margin、padding属性的区别的更多相关文章

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

    边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...

  2. PHP全栈开发（八）：CSS Ⅷ border margin padding

    在CSS里面,所有的HTML元素都可以看成是一个盒子. 那么在设计和布局的时候,最常用的,也就是用来定义这个盒子的外边距的就是margin 定义这个盒子的内边距的就是padding 元素的内容所占的宽 ...

  3. border、margin、padding三者的区别

    当你写前端的时候,肯定会遇到border,margin和padding这几个单词. 如: padding: 16px 0; margin: 0 10px; 在CSS中,他们是表示距离的东西,很多人刚开 ...

  4. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  5. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  6. CSS中的margin、border和padding的区别

    aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA

  7. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  8. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  9. margin，border，padding简介

    站在图中心 Content 的角度理解: margin为外边框,border为边框,padding为内边框. 在xml中设置: 如果上下左右的距离都是相同可以通过 android:layout_mar ...

随机推荐

  1. Tomcat 8熵池阻塞变慢详解(转)

    Tomcat 8熵池阻塞变慢详解 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs Tomcat 8启动很慢,且日志上无任何错误,在日志中查看到如下信息: ...

  2. MBR

    Mbr位于磁盘的0柱面,0磁头,1扇区. MBR       有三部分构成,主引导程序,硬盘分区表DPT和,硬盘的有效标志55AA.在512个字节的主引导扇区里. 主引导程序占446个字节,dpt占6 ...

  3. asp.net mvc 强类型视图中传入List 数据到控制器

    问题来源: 在和一位技术老师聊天时,老师问我一个mvc 表单提交的问题,问道:怎样在表单提交的时候,将 带有 List 属性的对象传入控制器? 这时,我有点呆了,以前一直都好像是 单一属性的表单提交, ...

  4. 项目任务管理（TaskMgr）技术篇

    判定是否为枚举型:type.IsEnum 应用原型:如果是枚举返回字符型,如果是其他类型直接返回: object value = pro1.FieldType.IsEnum ? pro1.GetVal ...

  5. hdu3652B-number

    Problem Description A wqb-number, or B-number for short, is a non-negative integer whose decimal for ...

  6. EntityFramework Core使用PostgreSQL

    EntityFramework Core使用PostgreSQL 0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用 ...

  7. 【译】UI设计基础(UI Design Basics)--为iOS设计(Design for iOS)(二)

    2.1 为iOS设计(Design for iOS) iOS体现以下主题: 遵从:UI帮助用户理解界面内容并与内容交互,但绝不会与内容相互冲突. 清晰:文本在任何尺寸下都是清晰易读,图标精确易懂,装饰 ...

  8. java 修饰符的作用一(public protected default private 组)

    1.public protected default private 组 public 权限最大,同类,同包,不同包,同包子类父类之间,不同包子类父类之间都可以访问. java 默认的权限是defau ...

  9. 普通table表格样式及代码大全(全)

    普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

  10. 5. repeater图片放大

    当把鼠标放在一张小图片上时,图片会自动放大,离开时它变小. 我们在静态页面中可以用jQuery来操作.如下为html中的源码. <!DOCTYPE html PUBLIC "-//W3 ...