当给子元素添加了margin-top的数值,浏览器解析的时候默认添加到父元素上解决的方法:

  1 给父元素添加一个上边框border-top。

  2  或者给子元素加个浮动。

  3  给父元素添加overflow:hidden属性

  4给父元素添加浮动。

两个行内块元素或者是行内元素横着排(默认)的情况下,给其中一个元素添加了margin-top,其他的也会有一个margin-top属性。

  比如img元素。

  div{

  width100px;height:100px;background:red;

}

  <div>

    <img src=" 图片路径"/><img src= "图片路径 "/> 

  </div>

解决的方法:

  1给元素本身添加一个浮动;

  2给元素添加一个display:block;

关于margin-top的一些特别问题的更多相关文章

  1. 左右margin top问题百分比值

    不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...

  2. margin top 无效

    常出现两种情况: (一)margin-top失效 两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果. 解决办法: 1.box2增加f ...

  3. CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...

  4. CSS| 框模型-margin

    CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做 ...

  5. 理解css margin

    前提是对display:block元素 1 margin对没有width属性的元素,能影响其宽度,对于有width的则不起作用: 高度方面不受影响 此特性可用来排版 2 margin 与百分比 普通的 ...

  6. D3树状图给指定特性的边特别显示颜色

    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...

  7. CSS中margin与padding的区别

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

  8. Margin and Padding in Windows Forms Controls

    https://msdn.microsoft.com/en-us/library/ms229627.aspx Margin and Padding Precise placement of contr ...

  9. 由浅入深漫谈margin属性1

    margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. (该文章解释是否正确有待商榷,目前我的实验结果为:在默认情况或者div左浮动的情 ...

  10. 不要告诉我你懂margin

    分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/ 你真的了 ...

随机推荐

  1. 似懂非懂的Comparable与Comparator

    jdk1.8.0_41 一知半解写代码, 集合排序用个啥. 抄起键盘胡乱打, 似懂非懂最可怕. Comparable与Comparator都是用于集合的排序,对于大多数人来说Comparator可能略 ...

  2. srand()和rand()函数的使用

    rand()函数不接受参数,默认以1为种子(即起始值). 随机数生成器总是以相同的种子开始,所以形成的伪随机数列也相同,失去了随机意义.(但这样便于程序调试) srand()函数就是指明种子的大小:只 ...

  3. python 3.x 爬虫基础---Urllib详解

    python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 前言 爬虫也了解了一段时间了希望在半个月的时间内 ...

  4. Hive metastore源码阅读(一)

    不要问我为什么,因为爱,哈哈哈哈...进入正题,最近做项目顺带学习了下hive metastore的源码,进行下知识总结. hive metastore的整体架构如图: 一.组成结构: 如图我们可以看 ...

  5. JSP基础使用

    一.JSP简介 JSP(Java Sever Pages):是为了能让 Java 在 Web 页面运行的一种语言. 在JSP中包括两种主要内容: 1. HTML.JS语言(静态内容).由客户端浏览器负 ...

  6. vagrant启动报错The following SSH command responded with a no

    vagrant package打包生成box,以这个box为基础模板,打造vagrant环境,启动vagrant报错 angel:vagrant $ vagrant up Bringing machi ...

  7. 洛谷P1896 [SCOI2005]互不侵犯King【状压DP】

    题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 输入格式: 只有一行,包含两个数N,K ...

  8. python函数的面向对象——面向对象设计

    通过几个函数式编号演进,理解面向对象设计 def01.py dog1 = { 'name':'元昊', 'gender':'母', 'type':'藏獒' } dog2 = { 'name':'李李' ...

  9. win7下通过easyBCD引导安装Ubuntu16.04(并处理遇到的坑)

    Ubuntu16.04作为目前最新版本的ubuntu系统,相信很多人都想在自己的电脑上安装一下,然而系统的安装方法各式各样,u盘法.grub引导法等等,这里我将介绍在win7系统下用easyBCD软件 ...

  10. js在函数中未定义的变量的处理

    <html> <head> <script type="text/javascript"> var z=1; function abc(){ x ...