css 水平margin与竖直margin

1.当两个行内元素紧邻时,它们之间的距离为第一个元素的margin-right 加上第二个元素的margin-left

2.而两个块级元素之间的距离不是margin-bottom与margin-top的总和,而是两者中的较大者。这个现象称为margin的“塌陷”现象,意思是说较小的margin塌陷到了较大的margin中。

3.嵌套盒子之间的margin:子块的margin将以父块的content为参考。即实际距离为 子margin +父padding。

IE与Firefox 在细节上有区别。倘若设定了父元素的高度height值,如果此时子元素的高度超过了该height值,二者的显示结果完全不同。此时IE浏览器会自动扩大,保持子元素的margin-bottom的空间以及父元素的padding-bottom。而Firefox则不会,它会保证父元素的height高度的完全吻合,而这时子元素将超过父元素的范围。

4.margin值可以设置为负值。当块之间的是父子关系时,通过设置子快的margin参数为负数,可以将子块从父块中“分离”出来。

时间: 2024-10-22 02:10:58

css 水平margin与竖直margin的相关文章

自定义Imageview控件实现多种手势操作 (拖动、水平缩放、竖直缩放、等比例缩放、双击、长按)

项目中需要使用自定义控件的多种手势操作,之前在网上查阅资料的时候发现能找到的一般是只实现了其中的几种,这次就把我做的控件分享一下,人人为我,我为人人嘛,哈哈! 这个自定义控件实现的主要功能是控件的拖动和缩放(注意:不是对控件中的图片进行操作,话说很多帖子都把这两个混了),其中缩放可以按照三个方向进行,就是水平.竖直和等比例.双击操作只做了一个提示,长按加上了一个简单的弹出菜单. 抱歉的是没有足够的时间写详细注释了,如果跟你需要的功能相同就请直接调用,要是需要改代码就费点神自己读懂代码吧,看不懂的

numpy基础教程--对数组进行水平拼接和竖直拼接

在处理数组的时候经常要用到拼接,numpy中有两个非常实用的函数,可以快捷对数组进行拼接 1.hstack(tup)函数可以接收维度相同的数组,进行水平拼接. 2.vstack(tup)用来竖直拼接 演示代码如下: # coding = utf-8 import numpy as np import random t1 = np.arange(12).reshape(2, 6) t2 = np.arange(12, 24).reshape(2, 6) print(t1) print('\n')

Unity 2D游戏相机控制(水平,竖直,角色居中三种模式)

做2D游戏的时候,无非有三种模式,一种是只有竖直向上,一种是只有水平方向,一种是有水平又有竖直方向,我最近做游戏多关卡模式,不同模式就有着不一样的相机控制,按照平时的写法,也许有很多人就一下子写了三个相机脚本,现在我用了一个枚举类型来控制三个不一样的相机,贴代码: /// <summary> ///CameraCtrl ///Created by Wang YuTing /// </summary> using UnityEngine; using System.Collectio

模拟公交站台竖直排列,两端对齐

今天看到一个公家车站台的公家站牌,对站名的排列方式很有兴趣,html和css没有提供文字竖直排列的简便方法,需要我们利用一些技巧才能完成  大概要的效果就是这样的,竖直排列,两端对齐 首先先对竖直排列进行设计 先上html代码: 1 <ul> 2 <li><b>站牌1</b></li> 3 <li><b>站牌2</b></li> 4 <li><b>长站牌3</b>

深度自定义的propressBar和seekBar,可竖直显示,继承自View

android本身提供的progressBar和seekBar也可以自定义很多属性和样式,可是有时候在面对产品的诸多UI和功能要求时,我们会发现系统控件有时候并不是那么好用,功能不能做到随心所欲. 楼主最近在做电视上的设置项目,需要用到各种各样的propressBar和seekBar,横着的,竖着的,样式千奇百怪,实在是很蛋疼,最后自己继承自View写了一个比较统一且样式设置灵活的progressBar. 首先自定义了几个xml属性 <declare-styleable name="TvP

HTML中行内元素的竖直方向的padding和margin是否真的无效

参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的? 接下来就这个问题将具体分析: 1.行内元素拥有盒子模型么 答案是是的.没错,行内元素跟块级元素一样,同样拥有盒子模型. 2.行内元素的padding-top,padding-bottom和margin-top,margin-bottom是否无效 答案同样是是的.盒子

Flex实现水平竖直居中布局

传统的布局使用的是“盒模型”加上display.position和float属性,但是对于一些特殊的布局实现例如居中却是比较麻烦,所以,为了解决一些复杂的布局问题,一种更为灵活的布局方式出现了,那就是Flex布局. Flex 即为Flexible Box,指的是“弹性布局”,它可以为盒模型提供更加灵活的布局方式,例如,用flex可以优雅地实现水平竖直居中的布局. 例如下面这个例子,我们想做的是让child元素在parent里面水平竖直居中: <!DOCTYPE html> <html l

由css resite想到的深入理解margin及em的含义

由css resite想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;padding:0px; },用起来很方便吧?由于学习前端的门槛低,我一直找不到区别于那些用DW的前端的所在点,我总觉得我是用记事本写代码的,我的水平及理解绝对比那些用DW的人呀更胜一筹.但区别在哪里呢?最近,我似乎明白了,拿css来说,前面的很长一段时间,我都是在横向学习css,不断的学习新的东西,制

CSS中的body的默认margin

CSS中的body的默认margin 一般浏览器中都对body标签进行默认的margin设置为8px,当然,不同的浏览器会设置成不同的值,它是由浏览器的user-agent-stylesheet提供的,有些浏览器的user-agent-stylesheet可以由用户进行修改,而有的浏览器则不可以,所以开发人员不能依靠此来修改浏览器的默认设置.如果我们要修改body的默认值,只要覆盖其css样式即可: body { margin: 0px; padding: 0px; ... } 如果要使在不同的