盒子模型：

所有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. Ubuntu gitlab安装文档及邮件通知提醒配置

    1.安装依赖包,运行命令 sudo apt-get install curl openssh-server ca-certificates postfix 2.由于gitlab官方源可能被“墙”,首先 ...

  2. day 05字典相关内容

    1.day 04内容回顾及作业讲解 列表:增 append insert extend 删 remove pop clear del 改 li[索引]='被修改的内容' li[切片]='被修改的内容' ...

  3. Android 音视频深入 十八 FFmpeg播放视频，有声音（附源码下载）

    项目地址https://github.com/979451341/AudioVideoStudyCodeTwo/tree/master/FFmpegv%E6%92%AD%E6%94%BE%E8%A7% ...

  4. [BZOJ1596]电话网络

    Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...

  5. 为什么Vuex内数据改变了而组件没有进行更新？

    这两天在进行一个首页的制作,结果就碰到了标题上所述的问题了,用了一天的时间在网上查资料.终于找出了问题所在 Vuex的数据写在store里,在组件中需要用到this.$store.commit() 来 ...

  6. OO第一单元作业总结之初识面向对象

    第一个单元的三次作业均为求导,循序渐进的让我们掌握如何构造类和方法,让整个代码是面向对象的设计而不是面向过程的设计.如果第一次作业和第二次作业你只是简单的对过程着手架构类,到了第三次作业就会变得格外麻 ...

  7. memge和saveOrUpdate的区别

    今天做hibernate开发的时候遇到这样一个错误: a different object with the same identifier value was already associated ...

  8. QSSP软件一些参数的设置（远震波形合成）

    1.time window, sampling interval 这里需要注意的是两者的和必须是2的n次方,可以写成2047 1; 2046 2,或2047.75 0.25,2047.9 0.1等等 ...

  9. document.onkeydown

    document.onkeydown=function(e) { if(e.keyCode==13) { //当按下回车键,执行我们的代码 } }

  10. Problem A: 重载字符的加减法

    Description 定义一个字符类Character,只有一个char类型的数据成员. 重载它的+.-.<<和>>运算符,其中+.-的第二个操作数是int类型的整数n.“+ ...