<!doctype html>
<html>

<head>

<meta charset="UTF-8">
<title>子元素设置margin-top，父元素也受影响</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.father {
width: 500px;
height: 800px;
background: #ccc;
cursor: pointer;
/*第一种padding-top: 1px;常用*/
/*第二种border: 1px solid red(transparent);可用*/
/*第三种父元素设置overflow: hidden;*/
}
.son {
width: 450px;
height: 600px;
margin-top: 200px;
}
</style>

<body>
<div class="father">
<div class="son">
<img src="7v/1318240446520.jpg"/>
</div>

</div>

</body>

</html>

解决：子元素设置margin-top，父元素也受影响的问题的更多相关文章

  1. 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  2. 子元素设置margin-top，父元素也受影响

    这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...

  3. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  4. 【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？

    正常情况 如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后 父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float ...

  5. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  6. jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

    1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...

  7. css 给inline和inline-block元素设置margin和padding

    经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...

  8. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  9. 子div设置margin-top使得父div也跟着向下移动

    之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动.我用代码和图描述一下问题: <span style="font-size:1 ...

随机推荐

  1. 读书笔记3 Socket

    Socket被称为网络插座.用于两个网络应用程序之间的通信. 通信地址:URI 通过协议,地址,端口号可以确定网络上的一个程序.地址和端口号组合称之为端点. 通常会有发信人通信地址,收信人通信地址这两 ...

  2. MVC 与传统的 webform 的比较

    代码架构方式 ASP 脚本语言和代码同置,每个请求页面对应一个物理文件 WebForm 代码后置 ,每个请求页面对应dll和一个.asp物理文件 MVC 代码分离,每个请求对应一个Action和一个V ...

  3. Linux中Matlab保存多个数据到同一个文件当中

    % load pyrim % NumTrain = 50; % load machine %NumTrain = 150; % load housing % NumTrain = 300; % loa ...

  4. 继承多态绕点 Java篇

    上一篇把C#语言的继承,多态里的特殊的情况做了一下总结,其实那一部分代码都是从Java翻译过去的,今天来总结一下Java在这种情况下是怎么调用的. 上一篇我们说的是:1.多态,只在多态系里方法调用,很 ...

  5. c#中的反射

    System.Reflection.AssemblySystem.Activator Assembly assembly = Assembly.load("namespace名") ...

  6. JSP生成条形码

    下载barcode4j-2.0-bin.zip  目前最新版本是2.0, 解压barcode4j-2.0-bin.zip, 将其中的\lib\avalon-amework-4.2.0.jar和\bui ...

  7. JAVA-数据库连接【转】

    SqlServer.Oracle.MySQL的连接,除了地址和驱动包不同,其他都一样的. 1 public String urlString="jdbc:sqlserver://localh ...

  8. 关于jquery计算页面元素数量

    这段jquery计算页面元素数量代码,能不能刷新页面直接输出数量,而不用点计算按钮 <scriptsrc="http://ajax.googleapis.com/ajax/libs/j ...

  9. bzoj 2244: [SDOI2011]拦截导弹

    #include<cstdio> #include<iostream> #include<algorithm> #define M 100009 using nam ...

  10. C#编程

    C#最完整的webservice实例 http://fyinthesky.blog.163.com/blog/static/3555251720110115227337/ C# WinForm 实践开 ...