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, ...
随机推荐
- HIbernate学习笔记(二) hibernate对象的三种状态与核心开发接口
1.在hibernate中持久化对象有三个状态,这个面试时可能会问到: (1)transient瞬时态:在数据库中没有与之匹配的数据,一般就是只new出了这个对象,并且在session缓存中也没有即此 ...
- 集群搭建必备:虚拟机之一实现Host-only方式上网
Host-only模式实现联网得考虑如下配置过程: 1. 安装VMware-Workstation,安装虚拟机Linux(centos.ubuntu等)完毕: 2.设置虚拟机上网方式是Host-onl ...
- 使用SVN服务器管理源码
最近在学习使用SVN管理自己的项目文件,正好有好的文章就拿来标记一下,正所谓: 站在巨人的肩膀上 天下知识为我所用 转载两篇关于使用SVN管理源码的文章. 使用SVN进行源码管理(上):http: ...
- Vmware Ubuntu 虚拟机与Windows主机共享文件夹
概述: 1.安装Vmware tool 2.设置共享文件夹并选择总是连接 3.运行命令挂载共享文件夹 前两步很简单,第三步在root权限下运行命令:mount -t vmhgfs .host:/ /m ...
- Java正则表达式--网页爬虫
网页爬虫:其实就一个程序用于在互联网中获取符合指定规则的数据 爬取邮箱地址,爬取的源不同,本地爬取或者是网络爬取 (1)爬取本地数据: public static List<String> ...
- 【Away3D代码解读】其它一些的记录(持续更新)
查看当前正在使用的AGAL代码可以在程序开始时添加下面的代码,AGAL代码会被trace出来: Debug.active = true; 具体的输出是在MaterialPassBase类的update ...
- Oracle- PL/SQL DEV工具的使用收集
1.工具---首选项---用户界面---编辑器----定制关键词 里面可以选择关键字是否大写 2.美化代码段,点击菜单edit,然后pl/sql beautifer,快捷键:PL/SQL Develo ...
- 剑指OFFER之最小的K个数(九度OJ1371)
题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 输入: 每个测试案例包括2行: 第一行为2个整数n,k(1< ...
- spring aop 的一个demo(未完,待完善)
假设我们有这样的一个场景 : 对于一个类的众多方法,有些方法需要从缓存读取数据,有些则需要直接从数据库读取数据.怎样实现呢? 实现方案有多种.下面我说下常见的几种实现方案 : 1.直接采用spring ...
- ZZTHX-注意点
遇到刷卡器加密错误和后台解密不了的问题确实不太好解决,也有加密后的数据返回,可是后台总是解密不了.在这里我首先要感谢一下我的同事,在他们的帮助下,项目顺利完成了.有以下注意点现汇总如下: 1.密码加密 ...