盒子模型：

所有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. Kafka 1.0.0集群增加节点

    原有环境 主机名 IP 地址 安装路径 系统 sht-sgmhadoopdn-01 172.16.101.58 /opt/kafka_2.12-1.0.0 /opt/kafka(软连接) CentOS ...

  2. BackBone Network

    总结至维基百科https://en.wikipedia.org/wiki/Backbone_network 骨干连接各个网络,用于不同的局域网或子网(LANs or subnetworks)之间信息交 ...

  3. 框架-thrift-zookeeper-kafka

    Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架. 目前流行的服务调用方式有很多种,例如基于 SOAP 消息格式的 Web Service,基于 ...

  4. shiro三连斩之第二斩（SSM）

    在SSM框架中使用shiro.环境 使用idea工具. 最主要的大概是配置文件如何配置吧. 1配置maven依赖 <?xml version="1.0" encoding=& ...

  5. python logging模块使用流程

    #!/usr/local/bin/python # -*- coding:utf-8 -*- import logging logging.debug('debug message') logging ...

  6. 文件6. 查找替换.txt文本文件中的内容

    servlet实现对文本文件的查找替换 .jsp界面 <form> <table> <tr> <td>选择文本文件:</td> <td ...

  7. 常用MySQL操作（一）

    第二十四次课 常用MySQL操作(一) 目录 一.设置更改root密码 二.连接mysql 三.mysql常用命令 四.mysql用户管理 五.常用sql语句 六.mysql数据库备份恢复 七.扩展 ...

  8. Airbnb Javascript 代码规范重要点总结es6

    中文原地址 1.对所有的引用使用 const 而非 var.这能确保你无法对引用重复赋值. 当需要变动引用时,使用let. const和let都是块级作用域. 2.创建对象的方式: const ite ...

  9. jsp视频如何播放

    网站开发小白们对如何插入视频有较大的困扰,一段时间不知道从何下手,想在数据库里面直接导入,但没能成功,后又尝试直接在myeclipse里面直接放入视频. 对于不同的播放器,视频的格式也有要求,建议使用 ...

  10. 20175224 2018-2019-2 《Java程序设计》第六周学习总结

    教材学习内容总结 第七章:内部类与异常类 内部类:java支持在类中定义另一个类,这个类为内部类,包含内部类的类称为外嵌类. 理解内部类与外嵌类. Java编译器生成的内部类的字节码文件为“外嵌类名$ ...