• 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. css3 居中（推荐弹性盒模型方式）

    参考  http://www.zhihu.com/question/20774514 http://caibaojian.com/demo/flexbox/align-items.html 例子:ht ...

  2. Java：<获取>、<删除>指定文件夹及里面所有文件

    工具类代码如下: 一.获取 public Class Test{ //定义全局变量,存放所有文件夹下的文档 List<String> fileList ; public List<S ...

  3. html随笔CSS(*^__^*)

    控制文本显示字数,超过规定的文本长度  x显示... white-space:nowrap;        //规定不能换行 overflow:hidden; text-overflow:ellips ...

  4. 在linux执行kettle

    1.下载 最新版下载 7.1 https://community.hitachivantara.com/docs/DOC-1009855 2.准备 3.上传任务文件 .kjb,.ktr 4.上传mys ...

  5. angular2组件通讯的几种方式

    最近刚刚接触angular2,对ng2也是一知半解,如有说得不对的地方欢迎指出,欢迎加q共同探讨学习991085978: 1.通过输入型绑定把数据从父组件传到子组件 HeroChildComponen ...

  6. 网站如何实现 在qq中发自己链接时，便自动获取链接标题、图片和部分内容

    如何实现像这种效果?答案如下(要采用分享的形式,复制链接有可能会实现不了效果,至少我的测试是这样的) <head>标签内有QQ专有的标签可以控制要注意QQ的缓存机制,对同一个链接,修改后可 ...

  7. Docker(2)：快速入门及常用命令

    什么是Docker? Docker 是世界领先的软件容器平台.开发人员利用 Docker 可以消除协作编码时“在我的机器上可正常工作”的问题.运维人员利用 Docker 可以在隔离容器中并行运行和管理 ...

  8. 2017 秦皇岛CCPC　Balloon Robot　（ZOJ 3981）

    题意:给出n个队伍,m个座位,q次A题的队伍与时间,下一行是n个队伍的坐的位置,再下面q行就是第x个队再第y秒A出一道题,然后有一个机器人,开始位置由你选,他每走一步 他就会向右走一格,走到m的时候会 ...

  9. 一个灵活的AssetBundle打包工具

      尼尔:机械纪元 上周介绍了Unity项目中的资源配置,今天和大家分享一个AssetBundle打包工具.相信从事Unity开发或多或少都了解过AssetBundle,但简单的接口以及众多的细碎问题 ...

  10. 如何将 gitbook上的开源书转换为mobi

    看更新后的gitbook官网说不支持pdf.mobi导出,还以为用gitbook-cli也没法导出.几轮尝试之后发现还是能导出的,使用gitbook-cli即可实现. 按如下步骤进行操作,未能完成导出 ...