盒子模型：

所有HTML元素可以看作盒子,在CSS中，"box model"是用来设计和布局时 使用。

CSS盒模型本质上是一个盒子， 封装周围的HTML元素， 它包括：边距，边框，填充和实际内容。

外边距属性：设置对象四边的外部边距

  • 内联块级元素和块级元素的可以设置外边距。
  • 内联元素可以设置左、右两边的外边距；若要设置上、下两边的外边距，必须先使该元素变为块级元素或内联块级元素。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

内边距属性：设置对象四边的外部边距

  • 设置内联块级元素和块级元素的内边距。
  • 行内元素可以设置左、右两边的内边距；若要设置上、下两边的内边距，必须先使该元素变为块级或内联块级元素。
  • 改变padding的值，就改变了content的大小
  • 而改变margin的值，则不改变content的大小
 <style type="text/css">

     #container{

         border: 2px black solid;

         width: 700px;

         height: 800px;

     }

     #child{

         border: 2px black solid;

         width: 400px;

         height: 400px;

         margin: 100px auto;/* 设置外边距 */

         padding: 100px;/* 设置内边距 */

     }

 </style>

 </head>

 <body>

     <div id="container">

         <div id="child">div1</div>

     </div>

 </body>

css内外边距属性的更多相关文章

  1. CSS 内外边距 float positio属性

    一.外边距和内边 margin:            用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding:   ...

  2. CSS margin 外边距 属性的位置关系

    padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...

  3. [Web 前端] 013 css 内外边距

    1. css 内间距 也称:"内补白"或"内补丁" 参数 释义 padding 检索或设置对象四边的内部边距,如 padding:10px; padding:5 ...

  4. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  5. CSS：CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  6. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  7. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  8. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  9. Android UI系列-----长度单位和内外边距

    这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...

随机推荐

  1. nvm 设置 nodejs 默认版本

    nvm 设置 nodejs 默认版本 windows 系统的版本管理软件是nodist mac系统的node版本管理根据是nvm 每次重启vscode软件后,nvm ls 看到的默认版本都会恢复到v5 ...

  2. echarts-五分钟的教程

    https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

  3. qtp中type方法的按键常量

    记录键盘操作可以用set和presskey方法,而type方法是不记录的.type方法主要用于输入连接文本字符串和键盘修饰键(组合键),组合键之间用&符号. 如:JavaWindow(&quo ...

  4. javascript 模板

    今天想记录下对arttemplate模板的使用,哎,其实这玩意的兴起主要还是得从浏览器操作dom说起.如果修改浏览器的某一个dom节点就会引起文档流的重绘,然后这个重绘的耗时相当的大,是昂贵的开销.所 ...

  5. sface

    单步检测方法分为两类:anchor-based如ssd.RetinaNet;2)Anchor-free 如DenseBox.UnitBox;anchor-based处理的尺度范围虽小,更精准:anch ...

  6. 如何调用别人提供的webservice接口

    当我们拿到一个接口的时候,先别急着去调用它,我们得先测试这个接口是否正确,是否能调用成功,以及返回的数据是否是我们需要的类型等等.这时候我们需要一个工具,比如SoapUI.(最好用绿色免安装版的.)然 ...

  7. Freeswitch 各版本一键安装脚本 Freeswitch 快速安装 G729编解码库

    最近有时间整理,写了freeswitch的一键安装包分享一下,里面带有 mysql=0 是否选择安装mysql. 其他提示:脚本里面集成了安装g729脚本,支持录音.转码的bcg729脚本. 1.下载 ...

  8. Oracle 11g 测试ogg中断之后，重新同步操作

    测试ogg中断之后,重新同步操作 2018-06-07 17:11 779 1 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/2839 ...

  9. window.opener和window.open

    window.open (URL,name,specs,replace)方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. URL:可选.打开指定的页面的URL.如果没有指定URL,打开一个新的空 ...

  10. 实训任务05 MapReduce获取成绩表的最高分记录

    实训任务05  MapReduce获取成绩表的最高分记录 实训1:统计用户纺问次数 任务描述: 统计用户在2016年度每个自然日的总访问次数.原始数据文件中提供了用户名称与访问日期.这个任务就是要获取 ...