可以先看下这个视频教程：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. 【POJ3461】【KMP】Oulipo

    Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, without t ...

  2. Android ListView+image的使用

    首先创建layout部局文件xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayo ...

  3. Cookie的基本使用

    1, 如何创建cookie <?php //创建cookie信息 //这个函数用于保存cookie //第一个参数,表示cookie一个key,第二个表示val,第三个表示cookie值,在客户 ...

  4. QTP的DataTable操作整理（注---不知转载多少遍）

    返回值:数字 示例: 以下示例使用 GetRowCount 方法查找 MySheet 运行时数据表中最长的列中的总行数,并将其写入报告. rowcount = DataTable.GetSheet(& ...

  5. 基于 libmemcahce 的memcache 操作

    <?php echo '<pre>'; //测试的键值的数量 $count = 30; $mem = create_memcache(); //var_dump($mem->i ...

  6. C#中调用WIN32的API

    最近在学习C#中的GDI部分,本来尝试编写一个字幕控件(其实还是用label比较合适),但是发现控件中用GDI将整个控件粉刷貌似不行(应该是我水平不行),所以就去捣鼓了下WIN32的DLL,发现用AP ...

  7. APUE《UNIX 环境高级编程》读后感

    今天终于把APUE前17章全部看完了,基本上主要知识就在这些章节里. 之前看完<unix/linux编程实践教程>时,有一种豁然开朗.心旷神怡的感觉,在代码级别了解了linux很多系统机制 ...

  8. ACM竞赛常用STL（一）

    全排列函数next_permutation STL 中专门用于排列的函数(可以处理存在重复数据集的排列问题) 头文件:#include <algorithm> using namespac ...

  9. 一个小知识,shell如何输出换行符号

    一般来说如果在echo里直接写上\n,他不会被转义,必须加上-e参数 echo "hello\n morning" # 输出为 hello\n morning echo -e &q ...

  10. hbase 0.96 单机伪分布式配置文件及遇到的问题 find命令

    http://www.apache.org/dyn/closer.cgi/hbase/ 国外的站点下载速度慢,可以考虑国内的镜像网站~ 前面已经部署好了hadoop2.2.0单机伪分布式.必须先安装h ...