CSS 单独设置外边距属性,实例在线编辑

CSS 单独设置外边距

这里的单独设置外边距指的是通过CSS的属性为HTML元素的某个边单独设置外边距,这样可以更灵活地进行web前端的网页样式设计。CSS单独设置外边距的属性如下表:

属性描述
margin-top单独设置上边距
margin-right单独设置右边距
margin-bottom单独设置下边距
margin-left单独设置左边距

上表中各属性可采用的值:

外边距margin属性值

描述
len长度值,单位为px、pt、cm等
百分比单位为%,长度是相对于元素宽度的百分比
auto让浏览器自动计算外边距
inherit从父元素继承外边距属性

提示:margin允许负值


CSS单独设置外边距实例代码,及在线编辑器

<div id='m'></div>

<style>
  #m{width:90%;height:50px;border:1px solid skyblue;background-color:yellow;margin-top:50px;margin-right:5%;margin-left:5%;margin-bottom:50px;}
</style>

实例代码解析

如上代码,其中margin-bottom下边距的属性好像“不怎么起作用”,比如设置成50px和100px好像都没有什么变化。先不论什么原因,可以将在线编辑器内在id为m的div元素下面再添加一个div,并进行如下设置:#n{width:100%;height:50px;background-color:skyblue;},然后再修改margin-bottom的值并运行看一看有什么变化。



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.