• 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. highcharts，highStock 中文图表配置

    感谢开源的支持! https://github.com/hcharts/highcharts-zh_CN

  2. js 图片延时加载

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. Jquery源码探索

    封装原理 这里参考的jquery来进行封装的一个常用方法的一个库,可作为自己的一个库 原理:创建一个构造函数,将所有方法放在该构造函数原型里,访问$()方法时,返回这个构造函数的实例化,这样就简单的实 ...

  4. 《python》join、守护进程、锁/信号量/事件、进程队列

    一.multiprocess.process模块 1.join方法 阻塞主进程,等待子进程执行完毕再放开阻塞 import time import random from multiprocessin ...

  5. JavaScript简介及作用

    JavaScript是一门脚本语言,是可以插入HTML页面的编程代码,插入HTML以后可以由所有现代浏览器运行 一.写如html输出 <body> <script> docum ...

  6. Linux U盘安装

    Ubuntu 15 U盘安装: 用UltraISO把iso文件写入到U盘中,选择hdd+模式. u盘启动后提示not a com32r image,先按tab键,然后输入live进入试用模式,然后再点 ...

  7. js正则学习

    一直对正则很纠结也很畏惧,以前感觉花时间理解一个个奇奇怪怪的符号,还不如直接百度谷歌之. 但知其然不知其所以然也是种痛苦,所以花了两天稍微学了一下,虽然没学很深入彻底,但也比之前进步不少,特此笔记. ...

  8. JavaScript示例

    <!DOCTYPE html> <html> <head> <title>单击按钮事件示例</title> <script langu ...

  9. perl代码调试

    perl调试教程 一.DESCRIPTIONA (very) lightweight introduction in the use of the perl debugger, and a point ...

  10. JAVA基本类型和包装类

    JAVA的包装类 Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表 ...