[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
-
博客地址:http://www.cnblogs.com/wolf-sun/
博客版权:如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
分类:
[HTML/CSS]
标签:
margin
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .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的区别