border、margin、padding属性的区别

可以先看下这个视频教程: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

Margin 与 Padding 的区别

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

New UWP Community Toolkit - Staggered panel

概述 前面 New UWP Community Toolkit 文章中,我们对 2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 Staggered pa...

34560
来自专栏逍遥剑客的游戏开发

M2文件头

12220
来自专栏Linux驱动

LeetCode-391. 完美矩形(使用C语言编译,详解)

链接:https://leetcode-cn.com/problems/perfect-rectangle/description/ 题目 我们有 N 个与坐标...

39360
来自专栏hightopo

基于HT for Web的3D树的实现

11520
来自专栏IMWeb前端团队

transform 的副作用

本文作者:IMWeb elvin 原文出处:IMWeb社区 未经同意,禁止转载 transform 想必大家都很熟悉,可以通过其转换(translat...

22490
来自专栏24K纯开源

OpenGL与CUDA互操作方式总结

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面...

31750
来自专栏前端布道

为什么是link-visited-hover-active

前言 通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的...

36450
来自专栏HT

基于HT for Web的3D树的实现

在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到...

21450
来自专栏IMWeb前端团队

前沿技术解密——VirtualDOM

作为React的核心技术之一Virtual DOM,一直披着神秘的面纱。 实际上,Virtual DOM包含: Javascript DOM模型树(VTre...

21290
来自专栏hightopo

基于HTML5的3D网络拓扑树呈现

16720

扫码关注云+社区

领取腾讯云代金券