margin:

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        /*

        margin 外边距 元素与其他元素的距离（边框以外的距离）

        一个值的时候： 代表四个方向值一样 上右下左（顺时针）

         二个值的时候： 上下  右左

         三个值的时候： 上 右左 下

         四个值的时候： 上  右  下 左

         margin: auto; 快速左右居中

         垂直方向： margin-bottom,margin-top   取两者之间的较大值

         水平方向： margin-left,margin-right   取两者的和

         overflow:hidden; 解决内边距重叠问题

         */

        div{

            width: 300px;

            height: 200px;

            background: antiquewhite;

            /*border: 1px solid red;*/

            /*margin: 50px;*/

            /*margin: auto;*/

            /*display: inline-block;*/

            overflow: hidden;

        }

        .box{

            /*margin-top: 100px;*/

        }

        p{

            width: 50px;

            height: 50px;

            background: aqua;

            /*margin: 100px;*/

            margin: 100px;

        }

    </style>

</head>

<body>

    <div>

        <p></p>

    </div>

    <div class="box"></div>

</body>

</html>

padding:

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

         /*

        padding  内边距，边框与内容之间的距离

         一个值的时候： 代表四个方向值一样 上右下左（顺时针）

         二个值的时候： 上下  右左

         三个值的时候： 上 右左 下

         四个值的时候： 上  右  下 左

        */

        div{

            width: 300px;

            height: 200px;

            border: 1px solid red;

            /*padding: 20px;*/

            /*padding-left: 50px;*/

            /*padding-top: 50px;*/

            padding: 50px 0 50px;

        }

    </style>

</head>

<body>

    <div>

        padding  内边距，边框与内容之间的距离

         一个值的时候： 代表四个方向值一样 上右下左（顺时针）

         二个值的时候： 上下  右左

         三个值的时候： 上 右左 下

         四个值的时候： 上  右  下 左

    </div>

</body>

</html>

盒子大小：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div{

            width: 150px;

            height: 150px;

            background: aqua;

            border: 10px solid red ;

            padding: 20px;

            margin: 50px;

        }

        /*

            盒子大小=样式宽 + 内边距 + 边框

            盒子宽度=左border+右border+width+左padding+右padding

            盒子高度=上border+下border+height+上padding+下padding

        */

    </style>

</head>

<body>

    <div></div>

</body>

</html>

html-盒子模型及pading和margin相关的更多相关文章

  1. css盒子模型及属性介绍（margin,padding）

    每个HTML元素都可以看作装了东西的盒子 盒子具有宽度(width)和高度(height) 盒子里面的内容到盒子的边框之间的距离即填充(margin) 盒子本身有边框(border) 而盒子边框外和其 ...

  2. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  3. 标准盒子模型和IE盒子模型

    标准盒子模型 ＝ margin + border + padding + content (content =  width | height) IE盒子模型 ＝ margin + content ( ...

  4. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  5. DIV+CSS两种盒子模型

    盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.bord ...

  6. DIV + CSS 盒子模型

    盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C ...

  7. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  8. 【css】IE盒子模型和标准W3C盒子模型

    其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...

  9. 盒子模型--IE与标准

    从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. 从上图可以看到 IE 盒子模型的范围也包括 ma ...

随机推荐

  1. npm i 和 npm install 的区别

    实际使用的区别点主要如下(windows下): 1. 用npm i安装的模块无法用npm uninstall删除,用npm uninstall i才卸载掉 2. npm i会帮助检测与当前node版本 ...

  2. iOS -- Effective Objective-C 阅读笔记 (1)

    1: 在类的头文件中尽量 少 的引用其他头文件,尽量用 @class xxxxxx; 理解: 当你创建了一个 A 类,这个类又 需要具有 B 类的实例, 你可以直接为 A 类添加 B 类类型的 属性, ...

  3. Oracle 所有的权限列表

  4. Eclipse+maven+scala+spark环境搭建

    准备条件 我用的Eclipse版本 Eclipse Java EE IDE for Web Developers. Version: Luna Release (4.4.0) 我用的是Eclipse ...

  5. 字符串为空的比较 ==与equals() 区别(ｷ｀ﾟДﾟ´)!!基础很重要 ！！！

    情况描述:我提交的代码,让老大审批了一次,讲真的,对于我来说受益匪浅,其中有一个印象很深的内容:一个字符串是否为空的判断,我以前敲代码一直都是这样写的,可是从来都没有意识到这个东西. 代码: if(s ...

  6. laravel 多对多关联 attach detach sync

    用户表和角色表,多对多关联,一个用户有多个角色,一个角色属于多个用户 添加多对多关联 attach: 给1号用户添加1号角色,并把关联表的column字段赋值为$value,后边的数组需要的时候再添加 ...

  7. this作用范围

    1. this的指向 var name='window';var obj={ name:'obj', say:function(){ return function(){ return this.na ...

  8. Java基础之多线程框架

    一.进程与线程的区别 1.定义: 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比 ...

  9. 2017-2018-2 20165314 实验三《 敏捷开发与XP实践》实验报告

    知识点: 1.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: -XP是以开发符合客户需要的软件为目标而产生的一种方法论 -XP是一种以实践为基础的软件工程过程和思想 -XP ...

  10. mysql 去除重复 Select中DISTINCT关键字的用法 在使用mysql时，有时需要查询出某个字段不重复的记录，虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条，但往往只用它来返回不重复记录的条数，而不是用它来返回不重记录的所有值。其原因是 distinct只能返回它的目标字段，而无法返回其它字段，这个问题让我困扰了很久，用distinct不能解决的话，

      在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记 ...