<!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. <spring:message> 标签

    可以使用<spring:message>标签结合 ResourceBundleMessageSource 的功能,在网页上显示 messages.properties 中的文字讯息,例如在 ...

  2. 20145236 《Java程序设计》课程总结

    20145236 <Java程序设计>课程总结 一.每周读书笔记链接汇总 第一周读书笔记 第二周读书笔记 第三周读书笔记 第四周读书笔记 第五周读书笔记 第六周读书笔记 第七周读书笔记 第 ...

  3. 用eclipse开发javaweb项目

    准备工作:安装并配置jdk jdk环境变量:1.C:\Program Files\Java\jdk1.6.0_31\bin   path的配置2.C:\Program Files\Java\jdk1. ...

  4. BZOJ3933 [CQOI2015]多项式

    $\sum_{k = 0} ^ {n} a_kx^k = \sum_{k = 0} ^ {n} b_k(x - t)^k \Leftrightarrow \sum_{k = 0} ^ {n} a_k( ...

  5. FZU 2028 时空门问题

    题目链接:时空门问题 简单bfs,每个格子移动的方式除了上下左右,还有时空门,开始想着用邻接表保存每个点能通过时空门到达的点就ok了.很快的敲出来,很快的WA了.长久的dbug并没有发现error.然 ...

  6. mysql创建PATH快捷

    1.使其临时生效 PATH=$PATH:/usr/local/mysql/bin 2.永久生效 编辑/etc/profile  添加第79列 然后source /etc/profile 3.输入命令m ...

  7. ubuntu14.10设置开机启动服务

    1.比如lampp其他的都类似: 我是这么操作:(屌丝初学者) a.把lampp启动程序放到/etc/bin下面 b.vi /etc/rc.local ,加入lampp start(有了第一步就可以这 ...

  8. 戴文的Linux内核专题：03驱动程序

    转自Linux中国 驱动程序是使内核能够沟通和操作硬件或协议(规则和标准)的小程序.没有驱动程序,内核不知道如何与硬件沟通或者处理协议(内核实际上先发送指令给BIOS,然后BIOS传给硬件). Lin ...

  9. (kate)win8-64位系统下opencv-2.4.3的安装以及在visual_studio2010中配置

    环境: 操作系统:window8.1 64bit Opencv版本:OPencv-2.4.3 VS版本:vs 2010 一.安装Opencv 1.Opencv官网http://opencv.org/ ...

  10. matlab blkproc

    有关blkproc 命令的使用 (2011-07-31 09:52:57) 标签: 杂谈 分类: matlab使用 如果你让matlab帮你计算最好的块大小,用bestblk函数,[MB,NB] = ...