[HTML/CSS]margin属性用法

概述

在一些小的项目中,前台样式还是需要自己来写的,这时候,margin在布局中还是有一定的地位的。上篇文章中介绍的盒子模型中,就有margin的存在。

margin

margin可以用来设置css块级元素之间的距离。

复制代码
        * {
            /*距左元素块距离(设置距左内边距)*/
            margin-left: 0px;
            /*距右元素块距离(设置距右元素块距) */
            margin-right: 0px;
            /*底元素块距离(设置距低(下)元素块距)*/
            margin-bottom: 0px;
            /*距头顶(上)元素块距离(设置距顶部元素块距离)*/
            margin-top: 0px;
        }
复制代码

除了使用像素外,还可以使用百分比的方式

复制代码
 1         * {
 2             /*距离左元素块距10像素,可跟百分比如(margin-left:10%;   距离左元素块10%的距离)*/
 3             margin-left: 10px;
 4             /*距离右边元素块距10像素,可跟百分比如(margin-right:10%; 距离右边元素块10%的距离) */
 5             margin-right: 10px;
 6             /*距离低边元素块距10像素,可跟百分比如(margin-bottom:10%; 距离底边元素块10%的距离)*/
 7             margin-bottom: 10px;
 8             /*距离顶边元素块距10像素,可跟百分比如(margin-top:10%; 距离顶边元素块10%的距离)*/
 9             margin-top: 10px;
10         }
复制代码

可以有更简单的方式来写:

复制代码
 1        div {
 2             margin: 10px;
 3             /*意思就是上下左右元素块距离就是10px(10像素)等于*/
 4             /*margin-top: 10px;
 5             margin-bottom: 10px;
 6             margin-left: 10px;
 7             margin-right: 10px;*/
 8             margin: 5px 10px;
 9             /*意思上下元素块距离为5px,左右的元素块距离为10px,等于*/
10             /*margin-top: 5px;
11             margin-bottom: 5px;
12             margin-left: 10px;
13             margin-right: 10px;
14           */
15             margin: 5px 6px 7px;
16             /*意思上元素块距离5px,下元素块距离为7PX,左右元素块距离为6px,等于*/
17             /*margin-top: 5px;
18             margin-bottom: 7px;
19             margin-left: 6px;
20             margin-right: 6px;*/
21             margin: 5px 6px 7px 8px;
22             /*意思上元素块为5px,右元素块距离为6px ,下元素块距离为7px,左元素块距离8px,等于*/
23             /*margin-top: 5px;
24             margin-right: 6px;
25             margin-bottom: 7px;
26             margin-right: 8px;*/
27         }
复制代码

其中:margin:5px 6px 7px 8px是按照顺时针的方向设置值的。
参考:http://www.divcss5.com/shili/s6.shtml

posted @   wolfy  阅读(7294)  评论(2编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
历史上的今天:
2013-10-15 [C#基础]ref和out的区别
点击右上角即可分享
微信分享提示