margin | 学习笔记

简介: 快速学习 margin。

开发者学堂课程【CSS 快速掌握margin 】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9193


margin


内容介绍

一、margin 的定义

二、margin 的描述方法

 

一、margin 的定义

margin 它表示“外边距”的意思它是指盒子与盒子之间的距离

 

二、Margin 的描述方法

margin 它也是有4个方向的所以我们也能够通过4个方向对其进行描述方法有两种:第一种我们称之为小属性,第二种我们称之为简写属性小属性:,

1.小属性

margin-top: 上外边距。margin-right:右外边距,margin-bottom:下外边距。margin-left:左外边距·

2.简写属性

margin: 简写属性它是有方向的这里的方向是一个顺时针的方向―它的方向是的顺序是:上、右、下、左。

范例:

margin:10px;表示上右下左这四个方向的外边距都是10像素。

margin:10px 20px;表示上下这两个方向的外边距为10像素︰左右两个方向的外边距为20像素。

margin:10px 20px 30px;表示上外边距为10像素左右外边距为20像素下外边距为30像素,

margin:10px 20px 30px 40p;表示上外边距为10像素右外边距为20像素下外边距为30像素左外边距为40像素,

相关文章
|
2月前
|
前端开发
一张图搞懂盒子模型 margin padding
这篇文章通过一张图帮助读者理解CSS中的盒子模型,特别是`margin`和`padding`的概念,解决容易混淆这两个属性的问题。
|
4月前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
209 44
|
5月前
|
前端开发
如何将一个盒子模型变成border-box?
如何将一个盒子模型变成border-box?
24 0
|
5月前
|
编解码 前端开发 容器
vh,vw,px,%有什么区别
vh,vw,px,%有什么区别
200 0
你不知道的border-style border-radius background
你不知道的border-style border-radius background
html+css实战100-border和padding
html+css实战100-border和padding
102 0
html+css实战101-border和padding尺寸
html+css实战101-border和padding尺寸
103 0
|
前端开发 开发者
Margin 居中 | 学习笔记
快速学习 Margin 居中。
999 0
|
前端开发 开发者
Border-collapse | 学习笔记
快速学习 Border-collapse。
125 0
|
前端开发 开发者
善于使用父元素的 padding 而不使用子元素的 margin | 学习笔记
快速学习善于使用父元素的 padding 而不使用子元素的 margin 。
147 0