margin属性的正负值确定
margin属性用来使用设置外边距,大多数情况使用正值,但是一些稍复杂的定位就会使用到负值,所以对margin属性的正负值理解是有必要的,本文同时解释了margin-right和margin-bottom没有效果的原因以及解决方法。
1、“margin-left”属性
margin-left属性设置元素的左边距。
记忆方式一:以“元素原来位置的左边”为零界线,向右移动为正值,向左移动为负值。
记忆方式二:以“其他元素(即元素想要拉开距离的外元素)的边缘”为零界线,元素的左边与零界线拉开距离为正;元素左边超出零界线为负。
例子如下:
2、“margin-right”属性
margin-right属性设置元素的右边距。
注意:直接使用margin-right属性一般不会有任何效果,这是因为浏览器默认从左往右渲染元素,在没有超出父容器的宽度的前提下, 如果子容器的宽度能够被容纳 ,设置margin-right是没有用的。
解决:要使margin-right有用,就必须使用定位属性(position)或者浮动属性(float)为前提。
这里使用position为例,先将父元素设置相对定位position:relative,再将测试元素设置绝对定位position:absolute,right:0px。
记忆方式一:以“元素原来位置的右边”(这里指已经定位好,前提设置好的位置)为零界线,向左移动为正值,向右移动为负值。
记忆方式二:以“其他元素(即元素想要拉开距离的外元素)的边缘”为零界线,元素的右边与零界线拉开距离为正;元素右边超出零界线为负。
例子如下:
3、“margin-top”属性
margin-top属性设置元素的上边距。
记忆方式一:以“元素原来位置的上边”为零界线,向下移动为正值,向上移动为负值。
记忆方式二:以“其他元素(即元素想要拉开距离的外元素)的边缘”为零界线,元素的上边与零界线拉开距离为正;元素上边超出零界线为负。
例子如下:
4、“margin-bottom”属性
margin-bottom属性设置元素的下边距。
注意:直接使用margin-bottom属性一般不会有任何效果,这是因为浏览器默认从上往下渲染元素,在没有超出父容器的高度的前提下, 如果子容器的高度能够被容纳 ,设置margin-bottom是没有用的。
解决:要使margin-bottom有用,就必须使用定位属性(position)或者浮动属性(float)为前提。
这里使用position为例,先将父元素设置相对定位position:relative,再将测试元素设置绝对定位position:absolute,bottom:0px。
记忆方式一:以“元素原来位置的下边”(这里指已经定位好,前提设置好的位置)为零界线,向上移动为正值,向下移动为负值。
记忆方式二:以“其他元素(即元素想要拉开距离的外元素)的边缘”为零界线,元素的下边与零界线拉开距离为正;元素下边超出零界线为负。
例子如下:
总结:
以“元素原来位置的边”为零界线(margin-left以左边,margin-right以右边,margin-top以上边,margin-bottom以下边),向边的相反方向移动为正值,向边的同向方向移动为负值。举例:margin-left,以“元素原来位置的左边”为零界线,向右移动为正值,向左移动为负值。
margin属性的正负值确定相关推荐
- css【详解】—— margin属性(含margin合并,margin:auto,margin失效)
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2. 父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3. 空块级元素的m ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- HTML5中margin属性应用,CSS重要属性之 margin 属性知识大整合(必看篇)
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...
- CSS 盒模型之外边距 margin属性
外边距会在元素外创建额外的空白区域,这个区域不能放置其他元素.因此,大多数情况下,普通流中都是通过外边距来控制元素之间的距离,使元素间出现间隔. 外边距默认是透明的,在这个区域中可以看到父元素的背景. ...
- 在html中设置margin属性,margin
margin (CSS语法) 编辑 锁定 讨论 上传视频 margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度. 中文名 外边距 ...
- html中边框与边框距离,css边框border与margin属性
CSS边框属性: border不能分别定义4个边框的宽度,颜色和样式,只能统一定义,不可以对四个边设置不同的值,和margin与padding是不同的(后两者可以分别定义四个边的值). border- ...
- css margin属性,css margin属性怎么用?css margin属性用法教程
在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程. margin是css用于在一个声明中,对所有css ...
- 5分钟深入了解margin属性
1.定义与用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明:这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻 ...
- CSS margin属性详解
CSS margin属性详解 我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...
最新文章
- 十三、面向对象程序设计
- Install FileZilla in Ubuntu16.04
- SpringMVC传递JSON数据的方法
- python中的引用怎么理解_python 引用和对象理解
- excel公式不自动计算_WPS表格仅显示公式不计算结果怎么办
- Redis和MongoDB通讯协议简介
- 微波遥感SNAP(四)——检测地表沉降(2)相位解缠与地理编码
- 计算机系统中引入虚拟内存的好处是什么,虚拟内存的作用是什么
- 微信接口第三方php原理,微信第三方登录原理
- 2020大疆校招B卷第二题
- 基于MFC的网络浏览器Demo
- 安全风险 microsoft 已阻止宏运行 因为此文件的来源不受信任
- LINUX远程连接关闭后进程退出的解决方案
- 如何用intellij生成全英文javadoc
- Failed to push the item
- 转 - dx8和dx9的差异
- 如何才能成为优秀设计师
- 东方财富上半年净利同比大增30倍
- 【Python】opencv展示汉字及与pillow对比
- DDD系列 实战一 应用设计案例 (golang)