• 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. ：单件模式：Singleton

    #ifndef __SINGLETON_H__ #define __SINGLETON_H__ class Singleton { private: static Singleton* instanc ...

  2. fastIO

    文件系统除了处理正常的IRP 之外,还要处理所谓的FastIo.FastIo是Cache Manager 调用所引发的一种没有irp 的请求.换句话说,除了正常的Dispatch Functions ...

  3. μC/OS-II在Microblaze上的移植与使用专题--“安富利杯”赛灵思FPGA设计技巧与应用创新博文大赛参赛作品

    reference:http://xilinx.eetrend.com/d6-xilinx/blog/2010-05/682.html   随着集成电路设计与制造技术的发展,FPGA芯片的容量越来越大 ...

  4. Java进程和线程

    进程是资源分配和任务调度的基本单位, 进程就是包含上下文切换的程序执行时间总和=CPU加载上下文环境+CPU执行+CPU保存上下文环境,可以理解为时间片段: 进程的颗粒度太大了,将进程分块,按照a,c ...

  5. vue2+webpack 开发环境配置

    前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...

  6. EF code first Mysql 更换主键类型

    把主键从long 改为int 居然要删掉重建,不知道有没有更好的办法. 删除带外键的表: Add-Migration name 修改生成的文件,主要把dbo.删除 然后update-database

  7. MVC4.0实现批量删除

    HTML: @using(Html.BeginForm("Delete","Home")){    <div>    <input type= ...

  8. ios 手机验证码用户注册(倒计时15秒)

    // // ViewController.m // register手机验证码注册 // // Created by zzqqrr on 17/8/28. // Copyright (c) 2017年 ...

  9. 移动端开发rem单位

    1.用js计算 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientat ...

  10. robotframework·RIDE基础

    date:2018520 day09 一.学习环境 1.安装python27 2.安装robotframework(cmd→[pip install robotframework]) 3.安装WxPy ...