可以先看下这个视频教程：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. （JAVA）从零开始之--打印流PrintStream记录日志文件

    这里的记录日志是利用打印流来实现的. 文本信息中的内容为String类型.而像文件中写入数据,我们经常用到的还有文件输出流对象FileOutputStream. File file = new Fil ...

  2. 微信公众平台开发(免费云BAE+高效优雅的Python+网站开放的API)

    虽然校园App是个我认为的绝对的好主意,但最近有个也不错的营销+开发的模式出现:微信平台+固定域名服务器. 微信公众平台的运行模式不外两个: 一.机器人模式或称转发模式,将说话内容转发到服务器上完成, ...

  3. js登录页面的 回车事件

    js登录页面的 回车事件 js登录页面的 回车事件(2012-12-26 10:37:03)转载▼标签: jseventkey回车事件登录 分类: js.jquery  //回车事件 第一种docum ...

  4. nodejs版本控制

    本方法基于https://segmentfault.com/a/1190000004855835修改 配置: 使用的nvmw的git 地址https://github.com/hakobera/nvm ...

  5. 搭建BCE本地开发环境

    1. 在官网下载VirtualBox & 虚拟机 http://bce.baidu.com/doc/BAE/GUIGettingStarted.html#.E4.B8.8B.E8.BD.BD. ...

  6. c# appdomain

    http://www.cnblogs.com/Terrylee/archive/2005/11/28/285809.html

  7. hdu 5063 Operation the Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=5063 思路:因为3查询最多50,所以可以在查询的时候逆操作找到原来的位置,然后再求查询的值. #include ...

  8. QT 线程暂停，继续执行的一种实现（有些道理，而且封装了）

    注意:本次实现线程的暂停执行主要采用互斥量的方法,如果有更好的实现方法的小伙伴可以在下面留言! 直接插入代码了,由于做的小demo,代码写的可能有点乱,但还算完整. 1 2 3 4 5 6 7 8 9 ...

  9. perl 定义post接口

    [root@wx03 mojo]# cat a1.pl use Digest::MD5; my $md5 = Digest::MD5->new; $md5->add(1234567); p ...

  10. phpMyAdmin 多个跨站脚本漏洞

    漏洞名称: phpMyAdmin 多个跨站脚本漏洞 CNNVD编号: CNNVD-201307-649 发布时间: 2013-08-09 更新时间: 2013-08-09 危害等级: 中危   漏洞类 ...