可以先看下这个视频教程：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. centos 7 samba相关命令

    1.安装相关包 yum install samba samba-client samba-common 2.启动smb的命令 systemctl enable smb.service systemct ...

  2. Jquery 获取日期date()对象

    获取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date(); mydate.getYear(); //获取当前年份(2位) mydate.getFull ...

  3. log4j 1.2配置（转载）

    转载自:http://www.blogjava.net/kit-soft/archive/2009/08/28/292977.html 第一步:加入log4j-1.2.8.jar到lib下. 第二步: ...

  4. wdcp-apache开启KeepAlive提高响应速度

    因为我们的网站,媒体文件,js文件,css文件等都在同一个服务器上,并且,我们网站有非常多的图片,所以当建立好tcp链接之后,不应该马上关闭连接,因为每建立一次连接还要进行dns解析,以及启动一个ht ...

  5. PHP 字符串常用方法

    implode(“”,“”)-->字符串分割方法,第一个参数以什么样的形式分割,第二个参数需要分割的字符串 数组操作 is_array(),判断这个数是否是一个数组

  6. [cocoapods速成] cocoapods的基本用法和自制 podspec

    1 安装方法 主要命令: sudo gem install cocoapods ------------------------------------------------------------ ...

  7. [转] Java 8的新特性

    简介 毫无疑问,Java 8是Java自Java 5(发布于2004年)之后的最重要的版本.这个版本包含语言.编译器.库.工具和JVM等方面的十多个新特性.在本文中我们将学习这些新特性,并用实际的例子 ...

  8. 原 IOS之NSValue整理

    原 IOS之NSValue整理 发表于2年前(2013-02-28 23:02)   阅读(1974) | 评论(0) 5人收藏此文章, 我要收藏 赞3 IOS NSValue 值对象(value o ...

  9. cut 命令

    今天看到cut拿来取参数也是很方便的. cut -d = -f 2 -d表示分隔符 -f参数是分隔符算第几个参数

  10. 9.DataPager

    ListView搭配DataPager控件实现分页.有两种使用方式:一是将DataPager声明到ListView中:一种是DataPager\ListView没有嵌套关系,然后将DataPager的 ...