<!-- 类比礼品盒里装方块月饼。月饼的食用部分（我们把它称之为月饼肉身）要装在小包装盒里，月饼肉身即为content。月饼肉身与直接包裹它的小包装盒（我们把它叫做月饼的衣服）之间的距离叫padding。其中月饼的衣服厚度叫border。月饼的衣服与月饼礼品盒之间的距离叫margin。-->
<!-- css中的width和height指的是content的宽度和高度 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

        <style type="text/css">

            body{

                margin:0px;

            }    

            .test1{

                width:150px;

                height:150px;

                border:6px solid red;

            }    

            .test2{

                margin-top:40px;

                padding-top:40px;

                width:150px;

                height:150px;

                border:6px solid gray;

            }    

            .test2_son{

                width:80px;

                height:50px;

                border:12px solid blue;

            }

        </style>

    </head>

    <body>

        <div class="test1">test1</div>

        <div class="test2">

            <div class="test2_son">test2_son</div>

        </div>

    </body>

</html>

test1
test2_son

div,margin,padding的更多相关文章

  1. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  2. css007 margin padding border

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

  3. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  4. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  5. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  6. margin/padding百分比值的计算

    1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...

  7. css之margin && padding讲解

    margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...

  8. 总结那些有默认margin,padding值的html标签

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  9. 关于margin padding

    margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...

随机推荐

  1. 验证码进阶（TensorFlow--基于卷积神经网络的验证码识别）

    本人的第一个深度学习实战项目,参考了网络上诸多牛人的代码,在此谢过,因时间久已,不记出处,就不一一列出,罪过罪过. 我的数据集是我用脚本在网页上扒的,标签是用之前写的验证码识别方法打的.大概用了400 ...

  2. pandas.DataFrame.describe 官方文档翻译percentile_width，percentiles，include, exclude

     使用格式:DataFrame.describe(percentile_width=None, percentiles=None, include=None, exclude=None)  作用:生成 ...

  3. NOPI实现导入导出泛型List，支持自定义列

    概述 业务上需要自定义列的Excel的导入导出,在网上看了好多资料,很多都是有Bug而且都是支持Excel和DataTable的转换,所以自己总结了一下,应用.NET平台上的NPOI封装了支持自定义列 ...

  4. HTNL表单详解

    HTML表单 表单的结构 表单的标签:<form> </form> 常用属性 Name , method(get,post), action(服务器的接收的页面如:reg.ph ...

  5. PDF之pdfkit

    说起pdf就想到了一款很适用的工具,那就是pdfkit,在前几天的项目中,有一个功能要实现,为了实现这一个功能,于是我大海茫茫中查询各种百科,不负众望的让我找到了我心怡的工具,想必也就是它了.好了废话 ...

  6. tar磁带归档

    一:压缩.解压 1.compress/uncompress/zcat -d:解压 -c:输出到终端,不删除原文件 -v:显示详细信息 2.gzip/ungzip/zcat -d:解压 -c:将压缩或解 ...

  7. Codeforces Round #441 (Div. 2, by Moscow Team Olympiad) B. Divisiblity of Differences

    http://codeforces.com/contest/876/problem/B 题意: 给出n个数,要求从里面选出k个数使得这k个数中任意两个的差能够被m整除,若不能则输出no. 思路: 差能 ...

  8. Java-NIO（七）：阻塞IO与非阻塞IO

    阻塞IO 传统的 IO 流都是阻塞式的. 也就是说,当一个线程调用 read() 或 write()时,该线程被阻塞,直到有一些数据被读取或写入,该线程在此期间不能执行其他任务. 因此,在完成网络通信 ...

  9. Web标准的简单理解 不同内核浏览器的差异以及浏览器渲染简介(转)

    Web标准是一系列标准的集合.这些标准大概分三方面:结构.表现和行为.结构化主要有HTML, XHTML和XML,表现主要有CSS,行为标准主要包括对象模型,如 W3C DOM.ECMAScript等 ...

  10. 搭建ssm项目框架

    [声明]转载注明链接,源码联系公众号:aandb7获取 [此处组织名groupId:com.dayuanit,可替换公司域名:项目名artifactid:...] 此处第二个配置文件选择maven安装 ...