为什么子元素设置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>
<section style = "background:orange;">
<article style ='height:100px;margin-top:40px;background:red'></article>
</section>
</body>
</html>
这里子元素设置margin-top会作用在父元素上了。
解决方法:
1、为父元素设置padding。
2、为父元素设置border。
2、为父元素设置 overflow: hidden
。
为什么子元素设置margin-top会作用在父元素上?的更多相关文章
- 子元素用margin-top 为什么反而作用在父元素上?对使用margin-top 的元素本身不起作用?
在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...
- 透视 HTML子元素的margin-top样式会应用在父元素上的原由
情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...
- 为什么margin-top不是作用于父元素
为什么margin-top不是作用于父元素:建议:尽可能的手写代码,可以有效的提高学习效率和深度.至于margin-top属性的基本用法再简单不过,那就是设置一个对象的上外边距,看下面的代码实例: & ...
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...
- CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- css 给inline和inline-block元素设置margin和padding
经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...
- 关于IE处理margin和padding值超出父元素高度的问题
两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让 ...
- html 子元素和父元素都监听了 click 事件,点击子元素时为何先触发的是父元素的 click 事件?
先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...
- 元素设置float属性后,其后面的元素的位置问题
分两种情况: .content{ width:350px; height:150px; color:#fff; } .content1,.content2{ background-color: #00 ...
随机推荐
- PAT 1079 延迟的回文数(代码+思路)
1079 延迟的回文数(20 分) 给定一个 k+1 位的正整数 N,写成 ak⋯a1a0 的形式,其中对所有 i 有 0≤ai<10 且 ak>0.N 被称 ...
- eclipse中导入dtd文件实现xml的自动提示功能
以mybatis为例 1.mybatis的xml文件头: (1)config文件: <?xml version="1.0" encoding="UTF-8" ...
- 三维dem
关注World wind Java,<World wind Java三维地理信息系统开发指南随书光盘 1. 下载worldwind java sdk 下载地址:http://builds.wor ...
- tomcat6.0 配置不同端口访问不同项目
<?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apache Software Foundation (ASF ...
- C山寨C++
#include <stdio.h> #include <string.h> #include <malloc.h> typedef struct Aclass_s ...
- [开源,学习,分享]UWP第三方简书客户端分享
简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...
- 【Maven】Nexus配置和使用
Nexus安装 nexus安装,可以参照:[Maven]Nexus(Maven仓库私服)下载与安装 Nexus简单说明 用途:指定私服的中央地址.将自己的Maven项目指定到私服地址.从私服下载中央库 ...
- devexpress v14.2.3 发布
补丁而已. New Major Features in 14.2 What's New in VCL Products 14.2 Breaking Changes To learn about bre ...
- fortran write格式
advance="no",就是输出不换行. write(*,"(f10.1)",advance="no")A 格式化输出的控制字符非常的丰富 ...
- C#基础:在using中创建对象
在using中创建的对象的类必须是实现了IDispose接口的类,示例代码如下: static void Main(string[] args) { Method(); Console.WriteLi ...