1、图片与文字对齐问题

如果图片和文字差不多大时,使用兼容性强的margin负值方法。

方法:img{margin:0 3px -3px 0;}

2、div嵌套后margin出现失效(转移)问题

原因:盒子没有获得haslayout造成margin-top无效

方法:(1)父层div设置:{overflow:hidden;}

   (2)父层div设置:{padding-top:1px;}

   (3)父元素生成BFC;

      (4)当前元素margin-top外边距转化为padding-top;

3、IE双边距问题

产生条件:block元素+浮动+margin

方法:使用display:inline;

原因:inline元素或inline-block不存在双边距问题

margin相关的更多相关文章

  1. 盒子模型之margin相关技巧!

    废话不多说,直接进入主题,margin相关技巧. 1.设置元素水平居中:margin:x auto; 2.margin负值让元素位移及边框合并. 外边距合并 指当两个垂直外边距相遇时,它们将形成一个外 ...

  2. css margin相关问题及应用

    一.margin常见问题 1.IE6下双边距问题 margin双布局可以说是IE6下经典的bug之一.产生的条件是:block元素+浮动+margin. 2.maring重叠的问题 css2.0规范对 ...

  3. margin 相关 bug 系列

    原文地址:margin系列之bug巡演 by @doyoe IE6浮动双倍margin bug 这当是IE6最为经典的bug之一. 触发方式 元素被设置浮动 元素在与浮动一致的方向上设置margin值 ...

  4. margin相关属性值

    1.图片与文字对齐问题 图片与文字默认是居底对齐.一般img标签打头的小图标与文字对齐的话,通过 img{margin:0 3px -3px 0;} 这个的东西,能实现效果和兼容性俱佳的对齐效果: d ...

  5. html-盒子模型及pading和margin相关

    margin: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. margin相关基本知识

    什么是 margin ? CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素 ...

  7. css margin的相关属性,问题及应用

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...

  8. 绝对定位下margin的作用

    以前一直对绝对定位下的margin作用很模糊,今天细看一下 不使用top,left,margin等 <!DOCTYPE html> <html lang="en" ...

  9. 浅谈块元素绝对定位的margin属性

    对于div的绝对定位一直以为margin属性是无效的,只是通过top,left,bottom,right定位,然而今天的却发现不是这样的,于是对其做了些实验: 使用的HTML原始测试文件: <! ...

随机推荐

  1. final、static、代码块、静态代码块、内部类、代码执行顺序

    final final域使得确保初始化安全性(initialization safety)成为可能,初始化安全性让不可变形对象不需要同步就能自由地被访问和共享 作用在类上               ...

  2. HCTF

    题目:魂斗罗 介绍:这个是HCTF里面的杂项,很好玩的, 1,这个看链接可以下载(http://139.224.54.27/gogogo/hundouluo.nes),然后在网上下载一个虚拟器(htt ...

  3. [最短路]P1119 灾后重建

    题目背景 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路才能 ...

  4. android TransFormexecption 解决

    近期编译的时候遇到这个问题.... > com.android.build.api.transform.Transformexception: java.util.zip.ZipExceptio ...

  5. ES7前端异步玩法:async/await理解

    在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...

  6. 使用Maven Archetype插件构建Maven工程原型模板

    创建原型模板 1.在空目录运行archetype:generate上面的命令,待下载完必要的jar包后,首先需要输入内置的原型编号: 1 Choose archetype: 2 1: internal ...

  7. JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式

    1.单例模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. 洛谷银牛派对SPFA

    题目描述 One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to attend the b ...

  9. 制作多级菜单hide()与show() toggle()

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. idea从git上拉取并管理项目

    1:idea从git上拉取项目 (1)FILE --> New --> Project from Version Control --> Git (2):输入项目的Https SSH ...