• 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. jenkins部署web项目到tomcat（五）

    (1)maven构建web项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  2. Java 整体测试重点题 错题积累

    重点题    错题积累 1: 解析: %d:用来设置输出日志的日期和时间 %m:用来输出代码中指定的消息 %n:用来输出一个回车换行符 %l:用来输出日志事件的发生位置 %p:用来输出优先级 %f:用 ...

  3. 服务器由于redis未授权访问漏洞被攻击

    昨天阿里云拦截到了一次异常登陆,改了密码后就没有管他, 今天阿里云给我发消息说我的服务器可能被黑客利用,存在恶意发包行为....... 不过我不打算只是单纯的重置系统,经过一系列的查找原因后,发现被攻 ...

  4. mysql 给表和字段加注释

    给表加注释: ALTER TABLE table_name COMMENT='这是表的注释'; 给列加注释: ALTER table table_name MODIFY `column_name` d ...

  5. 平行四边形 css实现

    首先将 display 设置为  inline-block 或block: 在应用skew(): transform:skewX(-45deg); 但是也会导致平行四边形内的文字倾斜如下 我们可以给文 ...

  6. Centos7部署hadoop 3

    一:ssh免密登录: 1)vim /etc/ssh/sshd_config去掉注释或添加 RSAAuthentcation yes PubkeyAuthentication yes # Authent ...

  7. IDEA中不同项目配置不同JDK

    安装JDK后,选择其中一个配置环境变量,在IDEA中可以给不同项目选择不同的JDK版本.如下图两个项目:

  8. unity3d 九宫密码锁

    using UnityEngine;using System.Collections.Generic;using System;using UnityEngine.EventSystems;using ...

  9. java学习笔记19（Arrays类）

    Arrays类: 此类包含用来操作数组的各种方法(比如升序和搜索): import java.util.Arrays; public class Demo { public static void m ...

  10. 【Python】xpath-1

    1.coverage包实现代码覆盖率 (1)pip install coverage (2)coverage run XX.py(测试脚本文件) (3)coverage report -m 在控制台打 ...