<!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. 关闭“JDK自动更新”提示

  2. mongodb的安装及注意事项

    环境:win8 32bit 1:安装 去mongodb的官网http://www.mongodb.org/downloads下载32bit的包 解压后会出现以下文件 在安装的盘C:下建立mongodb ...

  3. 你需要知道的三个 CSS3技巧(转)

    1. 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮 ...

  4. JAVA读取EXCEL文件异常Unable to recognize OLE stream

    异常: jxl.read.biff.BiffException: Unable to recognize OLE stream at jxl.read.biff.CompoundFile.<in ...

  5. js仿京东轮播图效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. 利用ODBC从SQLServer向Oracle中导数据

    1.首先要在Oracle数据库中建对应的表,Oracle数据库中的字段类型和Sql Server 有所不同,Oracle中常用的有varchar2.integer.nchar.date,Sql Ser ...

  7. BZOJ1576 [Usaco2009 Jan]安全路经Travel

    首先用Dijkstra做出最短路生成树,设dis[p]为1到p点的最短路长度 对于一条不在生成树上的边u -> v,不妨设fa为u.v的lca 则一fa到v的路径上的任意点x都可以由u达到,走的 ...

  8. 15个让人惊讶的 CSS3 动画效果演示

    CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择.如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画. 本文收集了15个惊 ...

  9. Steam和Byte[]之间进行输换

    一. 二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = 0; Image img = Image.FromStream ...

  10. 重写 button 的创建方法

    重写 button 的创建方法 //sxc时时改变 // self.videoM.progress = progress; // if ([self.videoM.downloadStr isEqua ...