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. 从外部设置传入Go变量

    前提:必须在build/run时指定 -ldflags="-X main.a=2.0 -X main.b=1" , 且a,b必须是string的变量,不能是常量, 不能是struc ...

  2. .NET Windows API库(Cjwdev.WindowsApi)版本2.2发布

    https://blog.cjwdev.co.uk/2011/06/12/net-windows-api-library-cjwdev-windowsapi-vesion-2-2-released/# ...

  3. js原生回到顶部,并平滑过渡---- 记录

    window.scrollTo({ top: 0, behavior: 'smooth', });

  4. maven项目使用log4j

    日志是应用软件中不可缺少的部分,Apache的开源项目 log4j 是一个功能强大的日志组件,提供方便的日志记录. 1.maven项目在pom.xml导入log4j依赖: <dependency ...

  5. 基于concurrent.futures的进程池 和线程池

    concurrent.futures:是关于进程池 和 线程池 的 官方文档 https://docs.python.org/dev/library/concurrent.futures.html 现 ...

  6. Android编程学习过程中遇到的错误以及解决办法

    Android Studio遇到的问题 Android Studio一直提示右下角那个错误,Failed to open zip file.我是根据这位大佬的博客https://www.cnblogs ...

  7. vue用webpack打包时引入es2015插件

    1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...

  8. C++ Primer 笔记——多重继承与虚继承

    1.在多重继承中,基类的构造顺序与派生类列表中基类的出现顺序保持一致,与初始值列表中的顺序无关. 2.在C++11新标准中,允许派生类从它的一个或几个基类中继承构造函数.但是如果从多个基类中继承了相同 ...

  9. ubuntu下如何编译C语言

    ubuntu下如何编译C语言     如果没有gcc编译器的话,使用以下命令获取 ~# sudo apt-get install gcc同时要下载辅助工具 ~# sudo apt-get instal ...

  10. 51Nod 1265 四点共面(计算几何)

    1265 四点共面  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出三维空间上的四个点(点与点的位置均不相同),判断这4个点是否在同一个平面内(4点共线也算共面). ...