• Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

直接上图：最上方的导航栏，右下角的模型图；导航栏的肉色对着右下角的肉色，代表的是margin（外边框）、依次如下。

css中的margin（外边框）、border（边框）、padding（填充）的区别的更多相关文章

  1. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  2. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  3. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  4. 解说css中的margin属性缩写方式

    <html> <body> <div style="border: 1px solid red;"> <div style="b ...

  5. CSS中上下margin的传递和折叠

    CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...

  6. 深入css中的margin

    深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> ...

  7. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  8. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  9. CSS中的margin、border和padding的区别

    aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA

随机推荐

  1. Java 中的代理模式及动态代理

    原文:https://blog.csdn.net/briblue/article/details/73928350

  2. linux,windows下日志文件查找关键词

    1.查找 /apps/tomcat/tomcat3/apache-tomcat-7.0.69/logs 目录下已.txt结尾的文件,在文件中搜索关键字 IfcmpEcrService并打印行号 /lo ...

  3. 关于makefile的生成原理以及make相关命令的使用

    一.生成configure过程中各文件之间的关系图 二.详细介绍 autoscan: 扫描源代码以搜寻普通的可移植性问题,比如检查编译器,库,头文件等,生成文件configure.scan,它是con ...

  4. merge into用法小结

    CREATE OR REPLACE PROCEDURE PRO_ZXC(O_NO OUT NUMBER,O_NOTE OUT NUMBER)ASBEGIN O_NO:=1; MERGE INTO QQ ...

  5. L268 A terrifying look at the consequences of climate change

    Climate change is a devilish problem for humanity: at once urgent and slow-moving, immediate and dis ...

  6. Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python flask大型项目目录

    Hello World 作者背景 应用程序简介 要求 安装 Flask 在 Flask 中的 “Hello, World” 下一步? 模板 回顾 为什么我们需要模板 模板从天而降 模板中控制语句 模板 ...

  8. python day02 作业答案

    1. (1).false   (2).false 2. (1).8  (2).4 3. (1).6  (2).3  (3).false (4).3   (5).true   (6).true  (7) ...

  9. less中使用calc

    css3中可以使用calc()来实现自适应布局 例如:width:“calc(100%  - 25px)” width: calc(expression); ==> expression是一个表 ...

  10. JavaBean转化为Map，List<JavaBean>转化为List<Map>

    /** * 将对象转化为map * * @param bean * @param <T> * @return */ private <T> Map<String, Obj ...