• 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. django+xadmin+djcelery实现后台管理定时任务

    继上一篇中间表的数据是动态的,图表展示的数据才比较准确.这里用到一个新的模块Djcelery,安装配置步骤如下: 1.安装 redis==2.10.6 celery==3.1.23 django-ce ...

  2. RabbitMQ 均衡调度(公平分发机制)

    均衡调度是针对Consumer来说的.现在有两个Consumer请求同一个队列的消息.RabbitMQ会将序号为奇数的消息发给第一个Consumer,会将序号为偶数的消息发送给第二个Consumer. ...

  3. flask小例

    #写一个app.py,处理3个URL: ''' GET / : 首页,返回Home; GET /signin:登录页,显示登录表单; POST /signin: 处理登录表单,显示登录结果. ''' ...

  4. 牛客多校第四场 F Beautiful Garden

    链接:https://www.nowcoder.com/acm/contest/142/F来源:牛客网 题目描述 There's a beautiful garden whose size is n ...

  5. EF Code First MySql 主从表设计的一些需要注意的内容

    假如有下面两张表 public class Main { public int Id{get;set;} public string Name{get;set}; public virtual ICo ...

  6. Ajax 以及 前端JSP页面如何查看数值

    $.ajax({ url: ctx + "/unit/rsdl/qyjy/getDljgCode", type: "post", success: functi ...

  7. <kafka><应用场景><Kafka VS Flume>

    前言 最近在搭一个离线Hadoop + 实时SparkStreaming的日志处理系统,然后发现基本上网上的这种系统都集成了kafka. 自己对kafka有一点点的认识,之前看过官网文档,用过一次,就 ...

  8. <Java><！！！><面试题>

    装箱 & 拆箱 public class Test03 { public static void main(String[] args) { Integer f1 = 100, f2 = 10 ...

  9. python自学第6天，文件修改，字符编码

    文件的修改: 一般是把旧文件的内容改了,在写入到新的文件中去. file_old=open("test","r",encoding="utf-8&qu ...

  10. C++连接mysql数据库的两种方法

    本文主要介绍了C++连接mysql数据库的两种方法,希望通过本文,能对你有所帮助,一起来看. 现在正做一个接口,通过不同的连接字符串操作不同的数据库.要用到mysql数据库,以前没用过这个数据库,用a ...