解决方法：

1.在父元素上加：overflow:hidden.

2.给父元素加border;

3.外容器上加上padding。

如何解决子元素设了margin-top之后父元素所受的影响的更多相关文章

  1. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  2. margin传递，子元素的上下margin会传递给父级

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

  3. 子元素增加margin-top会增加给父元素的问题

    假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...

  4. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  5. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  6. 为什么子元素设置margin-top会作用在父元素上？

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

  8. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  10. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

随机推荐

  1. HttpClient——Get,Post

    package com.ch.day5_httpclient; import java.util.List; import com.ch.myutils.NetWorkUtil; import com ...

  2. myeclipse 开发环境下，提示 String cannot be resolved to a type

    从SVN上下载项目,所有代码都有下来,在本地编译,java类总是报出n多红叉,惨不忍睹,String cannot be resolved to a type都出来了,以为是jar包未被加载,于是pr ...

  3. 30分钟学会如何使用Shiro

    本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...

  4. LeetCode:461. Hamming Distance

    package BitManipulation; //Question 461. Hamming Distance /* The Hamming distance between two intege ...

  5. jdbc的实例应用：增删查改实现

    //在jdbc中进行增删查改 //查看所有 public static void findAll() { String url = "jdbc:mysql://localhost:3306/ ...

  6. 简述id，instancetype和__kindof的区别

    id: 好处:可以调用任何对象方法 坏处:不能进行编译检查 + (id)person; instancetype 好处:自动识别当前类的对象 坏处:不会提示返回的类型 + (instancetype) ...

  7. 在AngularJS中同一个页面配置一个或者多个ng-app

    在AngularJS学习中,对于ng-app初始化一个AngularJS程序属性的使用需要注意,在一个页面中AngularJS自动加载第一个ng-app,其他ng-app会忽略, 如果需要加载其他ng ...

  8. tinkphp验证码的使用

    页面显示验证码: <div class="input-group has-feedback "> <input id="yzm" type=& ...

  9. Python3基础 列表乘一个整数 扩增列表

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  10. Openstack+Kubernetes+Docker微服务实践之路--Docker和Registry2

    渐入佳境,我们开始比较具体的工作,由于Docker是一个基础组件,所以本文的主题是Docker和Registry2. 底层系统基于Centos7,先在一台云主机上安装Docker,Docker的安装非 ...