• 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. nginx:支持https

    1.查看nginx模块 nginx -V 注意是大写的V,小写的v是查看版本号的命令. 如果看到with-ssl那就是有的 2.注册ssl证书并下载 免费的ssl证书有: Let's Encrypt ...

  2. mybatis 无法自动补全，没有获得dtd文件

    由于网络原因,eclipse无法下载到http://mybatis.org/dtd/mybatis-3-mapper.dtd,导致eclipse的编辑器无法自动补全标签. 解决办法:将dtd文件下载到 ...

  3. Centos7部署kubernetes准备工作(一)

    一.准备工作: 1.创建三台虚拟机:(在node1配置好环境,然后关机克隆出node2.node3.并修改网卡.主机名即可) linux-node1.example.com 192.168.43.21 ...

  4. 牛客多校第五场 F take

    链接:https://www.nowcoder.com/acm/contest/143/F来源:牛客网 题目描述 Kanade has n boxes , the i-th box has p[i] ...

  5. <Flume><Source Code><Flume源码阅读笔记>

    Overview source采集的日志首先会传入ChannelProcessor, 在其内首先会通过Interceptors进行过滤加工,然后通过ChannelSelector选择channel. ...

  6. Python 基础day3

    1.简述bit,byte,kb,MB,GB,TB的关系 1TB=1024GB;   1GB=1024MB ;  1MB=1024kb: 1kb=1024byte ; 1byte=8bit 2.简述as ...

  7. dynamic programming：find max subarray

    public static mark dynway( ) //put or pop the books into the basket,mark the highest recorder { int ...

  8. 【Think in java读书笔记】IO系统

    一.FIle类(处理文件目录问题) if else的另外一种写法 ,不加大括号也可以 import java.io.File; import java.io.FilenameFilter; impor ...

  9. async 函数--学习笔记一

    含义: ES2017 标准引入了 async 函数,使得异步操作变得更加方便.async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取 ...

  10. Java并发容器和框架

    ConcurrentHashMap 在多线程环境下,使用HashMap进行put操作会引起死循环,导致CPU利用率近100%.因为多线程会导致HashMap的Entry链表形成环形数据结构,一旦形成环 ...