margin,padding之我见
在网页布局中,margin和padding绝对会占很重要的作用,但是在实际的项目中,很多新手前端程序员们往往不能正确的使用它们,导致会出现一些不必要的麻烦,下面是我在前几天的项目中遇到的一些问题,以及个人总结的一些方法,仅供参考。
想比margin,padding则是要乖巧的多,几乎没有让你不省心的地方,我们知道,简单的padding语法有四种:
eg:1.div1{padding:1px;} (表示上下左右的内边距都是1PX)
2.div2{padding:1px 2px}; (上下边距是1PX,左右边距是2px);
3.div3{padding:1px 2px 3px}; 上边距是1px,左右边距是2px,下边距3px;
4.div4{padding:1px 2px 3px 4px}; 依次为上边距1PX,右为2px,下3px,左4px
其实总结就是一句话,从上边距开始,顺时针旋转赋值。其次,需要注意的话,padding没有负值,及时你给定值为负,也会当0处理。
margin情况要比Padding复杂一些,语法也和Padding一样,但是需要注意的主要有下面几个地方:
1.margin是允许负边距的,这在做一些叠加效果或是处理inline-block留白的时候很好用。
2.margin的外边距合并只存在垂直方向上。
3.行内元素只有左右两边的margin值,但须记住非可置换元素如img,textarea,select,button.,label,object也是可以设置垂直方向的margin的。
4.有一些情况垂直方向上的margin是不会合并的,比如:1.绝对定位元素不会与任何元素的外边距合并;2.浮动元素不会与任何元素的外边距合并;
3.inline-block不会与任何元素的外边距合并。
4.overflow取值为visible以外的元素与它的子元素不会合并
5.处理塌陷时的几种方法(一个盒子如果没有上补白和上边框,那么这个盒子的上边距会和哎内部文档流中的第一个子元素的上边距重叠,设置子元素margin-top,就会产生塌陷)。
1.给父元素加overflow:hidden;
2.设置父元素或子元素浮动;
3.给父元素加绝对定位;
4.父元素加padding或border;
5.将margin-top改为padding-top;
最后总结一下,在网页开发中,margin和padding都是经常使用的,那么我们应该何时用padding呢:1.希望在border内侧加空白时。2.空白需背景色时。3.上下两个盒子的空白,希望等于两者之和时。如果情况与上诉三种相反,那么我们不妨试试margin这个万能的东东吧!
margin,padding之我见的更多相关文章
- 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- css007 margin padding border
css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...
- css之margin && padding讲解
margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...
- 总结那些有默认margin,padding值的html标签
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
- 关于margin padding
margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...
- 巧用margin/padding的百分比值实现高度自适应
原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- html标签默认属性值之margin;padding值
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
随机推荐
- C++关键字(static-register-atuo-extern-volatile-const)
转自:http://blog.163.com/fengxuedong_fxd/blog/static/71926306201173151854964/ 下面关于C++的几个关键字是经常和我们打交道的而 ...
- bzoj 1095 [ZJOI2007]Hide 捉迷藏(括号序列+线段树)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1095 [题意] 给定一棵树,树上颜色或白或黑而且可以更改,多个询问求最远黑点之间的距离 ...
- wxWidgets Tutorial
wxWidgets Tutorial网站整理 两个重要的教程网站:1:点这里:2:点这里. 还有一个wxWidgets项目参考的网站:点这里. 已经翻译好的中文教程:点这里. 参考书籍:<wxW ...
- openstack api users list get token get servers
curl -i \ -H "Content-Type: application/json" \ -d '{ "auth": { "ident ...
- centos修改时区,设置时间
在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...
- hdfs里的文件下载HDFS之fsimage、metadata、edits、fstime(二十七)
首先,要有这个观念,元数据信息(fsimage + editslog). fsimage是在磁盘 metadata是在内存 ********************fsimage把内存的,序列化到磁盘 ...
- 问题-File not "controls.res"(XE2+Win7虚拟机)
问题现象:我在Win7的虚拟机中安装XE2,前提是原来的系统上有D2007,安装后,新建个工程,F9报"File not controls.res".百思不得其解. 问题原因:因为 ...
- Java SAX Parser
SAX is an abbreviation and means "Simple API for XML". A Java SAX XML parser is a stream o ...
- PHP流程控制(二)
布尔型循环就是为真的时候执行,为假的时候停止 注意:1.循环能够节约大量的代码,提高重用性质2.循环,一定要有退出条件.3.While循环中,在while循环之前必须对变量进行初始化; 单层循环:语法 ...
- Process学习
主要系统总结下我对进程的认识,以前理解得不够全面不够深入.本文肯定还不够好,当有新的认识新的理解后还会随时来更新.读完本文,下面几个问题便可理解清楚. 1.进程是什么? 2.为什么要有进程这个概念? ...