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的值并运行看一看有什么变化。