<!-- 类比礼品盒里装方块月饼。月饼的食用部分（我们把它称之为月饼肉身）要装在小包装盒里，月饼肉身即为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. 详解JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数成为 Children 的方法,然 ...

  2. Python 黑客相关电子资源和书籍推荐

    原创 2017-06-03 玄魂工作室 玄魂工作室 继续上一次的Python编程入门的资源推荐,本次为大家推荐的是Python网络安全相关的资源和书籍. 在去年的双11送书的时候,其实送过几本Pyth ...

  3. javascript学习（2）修改html元素和提示对话框

    一.修改html元素 1.修改p元素 1.1.源代码 1.2.执行前 1.3.执行后 2.修改div元素的className 2.1.源代码 1.2.执行前 1.3.执行后 3.直接在当前位置输出内容 ...

  4. Spring入门（3-1）Spring的标签命名空间

    1.标签命名空间声明: 2.标签命名空间使用 标签默认的命名空间是 security:,可以不用带 security:,直接写标签,如: <http  <authentication-ma ...

  5. apigw鉴权分析（1-3）百度 AI - 鉴权方式分析

    http://ai.baidu.com/docs#/Begin/top 一.访问入口 二.鉴权方式分析 1.鉴权认证方式一 - access_token - 针对HTTP API调用者 2.鉴权认证方 ...

  6. windows计划任务

    前段时间写了一个小工具,实现两个数据库的数据同步. 需求:要求每天的某个时间自动同步数据 功能写好之后,发现了windows一个自带的功能不错,可以实现我的需要,不用写定时器触发了 控制面板-> ...

  7. 使用nodeJS的 crypto模块来为你的密码hash加盐

    这篇文章将向你解释如何使用Node.js的Crypto模块对你的密码进行加盐hash.在这里,我们将不会对不懂的密码存储方式进行详细的比较.我们将要做的是知道在Node.js中使用加盐hash在进行密 ...

  8. Java8新特性第1章(Lambda表达式)

    在介绍Lambda表达式之前,我们先来看只有单个方法的Interface(通常我们称之为回调接口): public interface OnClickListener { void onClick(V ...

  9. R数据分析 第一篇：温习概率论

    概率论是人们在长期实践中发现的理论,是客观存在的.自然界和社会上发生的现象是多种多样的,有一类现象,在一定条件下必然发生,称作确定性现象,而概率论研究的现象是不确定性现象,嗯嗯,醒醒,概率论研究的对象 ...

  10. oracle11g导出表时会发现少表，空表导不出解决方案。

    一:背景引入 oracle11g用exp命令导出数据库表时,有时会发现只导出了一部分表时而且不会报错,原因是有空表没有进行导出,之前一直没有找到方法于是用最笨的方法重新建这些空表,当然在我们实际当中表 ...