• 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. 用highchaarts做股票分时图

    1.首先向社区致敬给予灵感参考: https://bbs.hcharts.cn/thread-1985-1-1.html(给予参考的的例子js配置代码未进行压缩,可以清楚看到配置信息)   2.公司是 ...

  2. DeepLearning4J

    http://blog.csdn.net/nysyxxg/article/details/52554734

  3. mq（1）:简介

    1.mq的使用场景 以前的我,一直都没太搞明白,为什么我们那么需要消息队列,直到我看到了网友scienjus.的这个例子. 例子:假设用户在你的软件中注册,服务端收到用户的注册请求后,它会做这些操作: ...

  4. S2 深入.NET和C#编程 机试测试错题积累

    机试第一题:                              //创建文件流(路径 模式) FileStream fa = new FileStream(@"D:\\S2第一次全文 ...

  5. Dell灵越 5559笔记本安装固态硬盘 BIOS设置

    固态硬盘的安装这里就不详细说明了,安装一共有两种 直接把原有的磁盘卸了,换成SSD(这种方法最简单) 另一种是把光驱卸掉,然后换上SSD(这里建议把原来的磁盘换到光驱里面,把SSD加到原来磁盘安装的位 ...

  6. 十一. Python基础(11)—补充: 作用域 & 装饰器

    十一. Python基础(11)-补充: 作用域 & 装饰器 1 ● Python的作用域补遗 在C/C++等语言中, if语句等控制结构(control structure)会产生新的作用域 ...

  7. VSTO：使用C#开发Excel、Word【5】

    <Visual Studio Tools for Office: Using C# with Excel, Word, Outlook, and InfoPath >——By Eric C ...

  8. oracel 日期查询

    --查出当前系统时间select SYSDATE from table; --格式转换--  TO_CHAR  把日期或数字转换为字符串 --  TO_CHAR(number, '格式')     - ...

  9. html页面技巧

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为S ...

  10. Core Java 面经

    1  面向对象的特征有哪些方面? (1)抽象,抽象就是忽略与当前目标无关的部分,抽象包含两个方面,一是过程抽象,一是数据 (2)继承,是Java中允许和鼓励类重用的思想的体现,, 它提供了一种方式,可 ...