margin设置,margin设置为负数
css 为什么有时MARGIN 不起作用,
css有时MARGIN 不起作用是设置错误造成的,解决方法为:
1、新建一个HTML文件,命名为test.html。
2、为了测试出明显的效果,在test.html使用div定义了一个带边框的模块,里面放一个p标签。下面以p标签的外边距设置为例,详细讲解margin的使用。
3、使用margin设置p标签的左外边距。主要使用margin-left的方法定义左外边距的样式,值越大,距离左边就越大。
4、使用margin设置p标签的右外边距。主要使用margin-right的方法定义右外边距的样式,值越大,距离右边就越大。
5、使用margin设置p标签的上外边距。主要使用margin-top的方法定义上外边距的样式,值越大,距离上边就越大。
6、使用margin设置p标签的下外边距。主要使用margin-bottom的方法定义下外边距的样式,值越大,距离下边就越大。
在网页制作中margin是什么意思,为什么后面还要跟个0?
默认情况下,html标签都有margin属性外边距,如果不设置0,会有间距不好看,为了清理这个默认的间距,所有需要给元素设置css属性margin:0
margin:0 为简写,意思是上下左右全部设置外边距为0,如果要设置右间距为10px,其它方向为0
可以这么设置 margin:0 10px 0 0 意思为 上外边距为0 右外边距为10px 下外边距为0 左外边距为0
写到这里应该明白了吧 margin简写顺序为 上 右 下 左
更多教程:lanye.org
【css】外边距margin的属性和使用方法
外边距很好理解,就是指边框以外的距离,可以表示和其它元素之间的距离,使用margin属性来设置。
margin后面可跟多个值,中间用空格分离,含义如下:
(1)首先我们放置三个盒子,颜色不同,宽高均为100px。
(2)我们给中间的橙色盒子加上一个10px的上外边距,可以看到橘黄色的盒子向下移动了10px,上面多了一个上外边距。
(3)接下来我们去掉上外边距,改成给橘黄色盒子加上一个10px的下外边距,发现橘黄色盒子并没有移动,移动的是下面的黄色盒子,所以margin-top和margin-bottom的用法一定要区分开。
(4)外边距可以是赋值,我们给橘黄色盒子添加一个-50px的上外边距,可以看到橘黄色盒子向上移动了。
(1)我们放置一个大的红色盒子,里面包着一个小的橘黄色盒子,当我们为橘黄色盒子添加了一个50px的上外边距的时候,本来应该只是小盒子多了上外边距然后导致向下移动。结果发现,效果就好像是给大盒子加了上外边距一样,大盒子跟着小盒子一起塌陷下去了,并不是我们想要的效果。
(2)如果大盒子有边框,或者橘黄色盒子上面还有元素,情况会是正常的,可以达到我们想要的效果,不会出现塌陷:
(3)解决方法
在外部元素上面没有边框,其内部上方也没有其它元素挡着的时候,给其子元素设置上外边距,会导致塌陷,达不到想要的效果。目前我们只能在遇到这种情况的时候尽量使用padding去设置,不要使用margin,当然还有很多别的解决方法,就不细说啦。
我们放置两个盒子,给上面的盒子添加一个100px的下外边距,给下面的盒子添加一个50px的上外边距,最终效果如图所示,两个盒子最后中间只隔了100px:
当下方元素的上外边距遇到上方元素的下外边距,是会发生重合效果的,设置的时候一定要注意。
块元素才可以设置上下左右外边距,内联元素设置上下外边距是无效的。
Android如何在java代码中设置margin?
1、比如imageView,有一个getLayout方法,获得的layout在强转类型到LinearLayout或者其他,然后再设定margin什么的。
2、我们平常可以直接在xml里设置margin,如:
Xml代码 ImageView?android:layout_margin="5dip"?android:src="@drawable/image"?/
但是有些情况下,需要在java代码里来写,可是View本身没有setMargin方法,怎么办呢?
通过查阅android api,我们发现android.view.ViewGroup.MarginLayoutParams有个方法
setMargins(left, top, right, bottom)。
其直接的子类有: FrameLayout.LayoutParams, LinearLayout.LayoutParams and RelativeLayout.LayoutParams。
Android Dialog 设置Margin方式总结
在日常开发中,总是会遇到各种Dialog的使用,调整根据UI设计的不同,会经常调整Dialog在屏幕中的位置,这篇文章主要介绍,在使用 DialogFragment 时设置Margin的几种方式。
如下是最后实现的效果:
设置两边margin效果:
设置顶部margin效果:
全屏的Dialog设置顶部Margin:
这个比较容易,主要就是设置一个高度wrap_content,宽度match_parent的dialog,然后在dialog的布局中设置margin就可以了。
如下是xml文件:
然后在DialogFragment的onResume里对Window做一些处理:
这种情况margin可以通过 WindowManager.LayoutParams 的 verticalMargin 属性来实现。 verticalMargin 和xml里面设置的layout_margin不一样, verticalMargin 是通过设置一个0-1的float变量,来标识margin在屏幕中的占比。
如下是在DialogFragment的onResume中的处理:
xml文件(和1的类似,没有什么特别):
这里如果使用2中的方法,没有任何效果。这里使用另外一种方式实现-- insetDrawable 。
这里的实现是在xml里面写一个 inset :
在DialogFragment的onResume方法中:
padding和margin的数值设置方式
?padding也是复合属性 padding:20px 上右下左都是20px?
?顺序是按照 上右下左的顺序来设置的(padding: 20px 15px 10px 5px;?)
?分开设置: padding-top:20px;
? ? ? ? ? ? ? ? ? ? padding-right:15px;
? ? ? ? ? ? ? ? ? ? padding-bottom: 10px;
? ? ? ? ? ? ? ? ? ? padding-left:5px;
?下面的会把上面的属性值覆盖: padding:20px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-top:40px;?
?padding:10px 20px 15px:(?上10px ?左右20px 下15px)? ? ?
上下 10px 左右 20px :(?padding:10px 20px;)
上右下左的外边距都是30px :margin:30px
上边距30 左右20 下40 :(?margin:30px 20px 40px;)
上下10 左右30 :(? margin:10px 30px;?)
也可以分开写:margin-top: 10px;
? ? ? ? ? ? ? ? ? ? ? ? ?margin-right: 20px;
? ? ? ? ? ? ? ? ? ? ? ? ?margin-bottom: 30px;?
margin可以给负值,会超出边界 :?margin-left: -40px;
下面的会把上面相同属性的值覆盖 :margin:30px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?margin-left:-30px;?