CSS 中 的 margin、border、padding 区别 (内边距、外边距)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

图解CSS padding、margin、border属性

W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。

margin:层的边框以外留的空白
background-color:背景颜色
background-image:背景图片
padding:层的边框到层的内容之间的空白 
border:边框 
content:内容

 

接下来将讲述HTML和CSS的关键——盒子模型(Box model)。理解Box model的关键便是margin和padding属性,而正确理解这两个属性也是学习用css布局的关键。

注: 为什么不翻译margin和padding? 
原因一: 在汉语中并没有与之相对应的词语; 
原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念。

如果有一点Html基础的话,就应该了解一些基本元素(Element),如p、h1~h6、br、div、li、ul、img等。如果将这些元素细分,又可以分别为顶级(top-level)元素、块级(block-level)元素和内联(inline)元素。

块级元素是构成一个html的主要和关键元素,而任意一个块级元素均可以用Box model来解释说明。
Box Model: 任意一个块级元素均由content(内容)、padding、background(包括背景颜色和图片)、border(边框)、margin五个部分组成。
立体图如下:

平面图如下:

根据以上两图,相信大家对于Box model会有个直观的认识。

以下说明margin和padding属性:
1、margin: 包括margin-top、margin-right、margin-bottom、margin-left,控制块级元素之间的距离,它们是透明不可见的。根据上、 右、下、左的顺时针规则,可以写为 margin: 40px 40px 40px 40px;
为便于记忆,请参考下图:

当上下、左右margin值分别一致, 可简写为:

margin: 40px 40px; 

前一个40px代表上下margin值,后一个40px代表左右margin值。
当上下左右margin值均一致,可简写为:

margin: 40px;

2、Padding: 包括padding-top、padding-right、padding-bottom、padding-left,控制块级元素内部,content与border之间的距离,其代码,简写请参考margin属性的写法。

至此,我们已经基本了解margin和padding属性的基本用法。但是,在实际应用中,却总是发生一些让你琢磨不透的事,而它们又或多或少的与margin有关。

注: 当你想让两个元素的content在垂直方向(vertically)分隔时,既可以选择padding-top/bottom,也可以选择margin-top/bottom,再此Ruthless建议你尽量使用padding-top/bottom来达到你的目的,这是因为css中存在Collapsing margins(折叠的margins)的现象。

Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素,垂直方向的margin中。

 

详细说明如下: 
如果只提供一个,将用于全部的四条边;
如果提供两个,第一个用于上-下,第二个用于左-右; 
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

body { padding: 36px;} //对象四边的补丁边距均为36px 
body { padding: 36px 24px; } //上下两边的补丁边距为36px,左右两边的补丁边距为24px 
body { padding: 36px 24px 18px; } //上、下两边的补丁边距分别为36px、18px,左右两边的补丁边距为24px 
body { padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px

 

转自:http://www.cnblogs.com/linjiqin/p/3556497.html

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是转向灯?使用转向灯有何技巧?

什么是转向灯?如何使用转向灯?新手司机对车辆还不是很熟悉,如何正确使用转向灯,尤其是在不同路段中该怎么正确使用转向灯,成为了很多新手们的困扰之一,今天我们就来为大家解决这个问题吧! 转向灯…

集合练习:登录注册功能

需求: 1、登录账号唯一,在注册时验证输入的账号是否可用,若已存在,则不可用,若不存在则可用2、登录时使用账号密码进行验证1 /**2 * author Administrator3 * 登录信息 4 */5 public class UserLogin {6 …

vue 通信、传值的多种方式(超详细)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等&am…

新手开车 驾驶小秘诀要牢记

有很多人刚买到新车兴奋异常,凭着并不熟练的驾驶技术,过了几天的车瘾后发现,刚买的车怎么出现了这样那样的问题 有很多人刚买到新车兴奋异常,凭着并不熟练的驾驶技术,过了几天的车瘾后发现,刚买的车怎么出现…

C++没有调用析构函数

github地址 在项目中遇到一个问题,析构函数没有调用产生了内存泄露。 具体见valgrind检测libevent内存泄露 我们看两个例子 demo1 class Test1; void del(Test1* obj){delete obj; } class Test1{ public:Test1(){printf("Test1\r\n");}~Test1(){pri…

实际操作之路考的这些事

辛苦了这么久练习路考,今天终于实际操作到我路考了。上车以后。关上车门。把考试的单地上给考官。还没有认真的去看考官一眼。于是就听到考官用低沉的声音对我说:你好!当时就感觉有一点意外。没想到考官你这么有礼貌。然后我就没那么紧张了&a…

[C# 网络编程系列]专题十二:实现一个简单的FTP服务器

引言: 休息一个国庆节后好久没有更新文章了,主要是刚开始休息完心态还没有调整过来的, 现在差不多进入状态了, 所以继续和大家分享下网络编程的知识,在本专题中将和大家分享如何自己实现一个简单的FTP服务器。在我们平…

vue 2 使用 Bus.js 实现兄弟 (非父子) 组件通信 简单案例

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可…

jenkins自动化部署

jenkins自动化部署 github地址 首先设置源码地址,jenkins会从仓库中拉取最新代码 拉取代码后运行shell脚本自动进行编译 cd mediaService cmake -S . -B cmake-build-release-hisi3531 -DCMAKE_C_COMPILER/opt/hisi-linux/x86-arm/arm-hisiv500-linux/target/bin…

学开车不能急于求成,心急上路

我发现很多人开始学开车以后就急着要上路,觉得开车是很简单的事情,个人觉得开车虽然不难(相对于会开车的人来说),但是,虽然不是很难,也不是一学会开车起步就能上路去潇洒的。急于求成的人很容易…

valgrind检测libevent内存泄露

valgrind检测libevent内存泄露 github地址 在使用封装好的http库时,遇到了如下的内存泄露,一开始在definitely处还存在泄露,这里就不贴图了,已经被淹没了。 根据提示定位出错代码位置,如下图: 这里提示ev…

大佬(概率期望DP)

首先根据数据范围,可以判断基本上是n^2的复杂度 通过分析我们发现每一次都可以从m个数中任意选,既然任意选,那么此时的概率的分母就是不变的,然而题中涉及的是某一段的最大值,所以我们按套路假设 f[i][j]表示第i天&…

高效的数据压缩编码方式 Protobuf

高效的数据压缩编码方式 Protobuf github地址 目录 ProtocolBuffers 是什么为什么要发明 ProtocolBuffersproto3 定义 Message 分配字段编号保留字段默认字段规则各个语言标量类型对应关系枚举枚举中的保留值允许嵌套枚举不兼容性更新 Message未知字段Map 类型JsonMapping p…

解决 VUE前端项目报错:RangeError: Maximum call stack size exceeded

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 我点击菜单按钮报错: RangeError: Maximum call stack size exceeded 2. 原因:参数传递有问题或者方法调用有…

新手必须掌握的学车技巧-上坡起步

我们知道,做什么事情都是万事开头难,新手们在学车方面更能体会到这一点,正确掌握学车技巧对于新手来说是非常重要的事情,今天,平安学车网(www.paxcw.com)就会大家探讨一下我们学车时必须掌握的是…

高效的序列化/反序列化数据方式 Protobuf

高效的序列化/反序列化数据方式 Protobuf github地址 目录 protocolBuffers 序列化 Int32StringMapslice序列化小结 protocolBuffers 反序列化 Int32StringMapslice序列化小结 序列化/反序列化性能最后 protocolBuffers序列化 上篇文章中其实已经讲过了 encode 的过程&…

解决 VUE前端项目报错: Uncaught ReferenceError : initPage is not defined (initPage 方法是有的,依旧报错找不到)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1. 明明代码中定义了 initPage 这个方法,,却一直报找不到这个方法: Uncaught ReferenceError: init…

掌握新手学车技巧对于新手来说是非常重要的

刚开始学车的时候对于新手来说很多操作不知道从哪里下手,这个时候,如果按照相关的学车技巧来学习的话,对于新手来说是非常有好处的。下面我们就来学习一下让新手们可以快速进入开车状态的学车技巧吧!基本上驾校的教练都会教学员把…

iView学习笔记(三):表格搜索,过滤及隐藏列操作

iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django项目,在项目中新建app,配置好数据库 api_test…

Jenkins自动编译库并上传服务器

Jenkins自动编译库并上传服务器 github地址 首先添加 git 地址: 再添加定时构建,每天夜里构建一次: 执行 shell 脚本进行构建 cd networklayerecho "build json x86" cmake -S . -B cmake-build-release -DCMAKE_BUILD_TYPERele…