<!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. 190. Reverse Bits -- 按位反转

    Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...

  2. Struts2 用 s:if test 判断String类型的对象属性值和单字符是否相等的问题

    Struts2 用 s:if test 判断String类型的对象属性值和单字符是否相等的问题   首先,这里所指的单字符形如:Y,男. 有两种做法: a. <s:if test='news.s ...

  3. 个人介绍和GitHub

    基本信息: 姓名:陈晖 学号:1413042068 班级:网工143 兴趣爱好:看小说,打游戏,听古风音乐,打羽毛球,骑行等 个人编程能力不高,写的代码都是作业…… GitHub注册流程: 对于Git ...

  4. CSS 收集

    margin:0 auto margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right, 因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居 ...

  5. C#获取相对路径的方法

    这八种C#获取相对路径的方法,包括获取和设置当前目录的完全限定路径.获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称等等内容. C#获取相对路径1. 获取和设置当前目录的完全限定路径.   ...

  6. Entity Framework 复杂类型

      为了说明什么是复杂属性,先举一个例子. public class CompanyAddress { public int ID { get; set; } public string Compan ...

  7. 第二章 XHTML基础

    1.一个网页,也就是一个XHTML文档,是由元素组成.元素定义了文本和图形在XHTML文档中的结构.XHTML文档的扩展名通常是.html或者htm. 2.XHTML元素使用XHTML标记定义,每个标 ...

  8. Android第三方开源对话消息提示框：SweetAlertDialog（sweet-alert-dialog）

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

  9. 转: HTTP协议的头信息详解

    通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息.这两种类型的消息由一个起始行,一个或者多个头域,一个只是头域结束的空行和可 选的消息体组成.HTTP的头域包括通用头,请求头,响 ...

  10. 菜鸟开始学习SSDT HOOK（(附带源码）

    看了梦无极的ssdt_hook教程,虽然大牛讲得很细,但是很多细节还是要自己去体会,才会更加深入.在这里我总结一下我的分析过程,若有不对的地方,希望大家指出来.首先我们应该认识 ssdt是什么?从梦无 ...