子元素设置margin-top影响到父级的原因及办法

本人在学HTML+CSS，在设计一个静态网页时发现，当我给子div设置一个margin-top的属性，结果父级也跟着动，找了许多原因无果，一开始想到的是会不会</div>没裹上，但是不是，我一直用的代码补全，一对的完整的打，而且还检查过。

然后又想到可能用了浮动，但是也没有，就只能去网上找，找了后看了一篇文章，瞬间启发我了，因为我给孙级别div做浮动的时候没有做浮动清除，所以我给那个父级了一个清除浮动的属性，然后就能好好玩了，真棒

原文地址：https://www.cnblogs.com/xfstu/p/11780966.html

时间： 2024-10-13 20:31:39

子元素设置margin-top影响到父级的原因及办法的相关文章

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

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8&q

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

原因在于:CSS 外边距合并复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <

2018-07-09 消除因为子元素的浮动而导致的父级塌陷问题

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ border: 1px solid red;

外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好.例子可以查看下面代码(IE下表现"正常",标准浏览器下查看出现"bug"): <!doctype html> <html> <head> <title>子元素设置margin-top,父元素也受影响</title>

解决：子元素设置margin-top，父元素也受影响的问题

<!doctype html><html> <head> <title>子元素设置margin-top,父元素也受影响</title></head><style type="text/css"> * { margin: 0px; padding: 0px; } .father { width: 500px; height: 800px; background: #ccc; cursor: pointer

子元素margin-top为何会影响父元素？

子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28日 11:25:38 阅读数:6944 问题如下一段很简单的代码: css如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; he

【Flex】子元素设置百分比高度生效的解决方法

一.问题描述: 当使用Flex布局时,子元素设置百分比高度后,如下图没有效果: 二.解决方法: 父元素必须设置高度,效果如下图: 三.完整代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

子元素的margin-top作用于外层父元素解决方法

子元素的margin-top作用于外层父元素解决方法:有时候在设置子元素的margin-top属性的时候,本来是要作用于父元素,但是表现的结果却是父元素具有了margin-top效果,下面就通过代码实例介绍一下如何解决此问题.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

子元素设置浮动样式，父元素高度为0

子元素如果设置了浮动样式,那么它就会脱离文档流,从而导致父元素高度变成0,当然不能说这是一个Bug,float的出现的初衷就是为了实现文字环绕图片来实现图文混排和流式布局,所以只能说这种情况只能是由于浮动样式的特性决定的. 测试用例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd