文档章节

margin经常使用的场景(一)

博为峰教研组
 博为峰教研组
发布于 2017/03/13 17:18
字数 246
阅读 2
收藏 0

1. margin塌陷现象

标准文档流中,竖直方向的margin不叠加,以较大的为准。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

div{

width: 200px;

overflow: hidden;

}

.p1{

width: 200px;

height: 100px;

background-color: orange;

margin-bottom: 40px;

}

.p2{

width: 200px;

height: 100px;

background-color: orange;

margin-top: 30px;

}

</style>

</head>

<body>

<div>

<p class="p1"></p>

<p class="p2"></p>

</div>

</body>

</html>

运行结果

此时可以看到第一个p标签和第2个p标签之间的距离只有40px,虽然第一个div的margin-bottom: 40px;第二个div的margin-top: 30px;。但是竖直方向上margin的值不会叠加,以较大为准,所以间距为40px。

这就是margin的塌陷现象。这种情况存在于标准流中。

如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的:

设置两个p标签分别为float:left。此时2个p标签之间的距离就为70px。

 

 

 

 

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
探秘 flex 上下文中神奇的自动 margin

为了引出本文的主题,先看看这个问题,最快水平垂直居中一个元素的方法是什么? 水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该...

chokcoco
05/23
0
0
2018-05-23 清除浮动、左边固定右边自适应、水平垂直居中

清除浮动、左边宽度固定右边自适应、水平垂直居中这三个知识点是我们经常在开发过程中需要用到的。不但经常用到,而且经常出现在面试题当中,所以对这三者进行知识总结很有必要。 1.清除浮动...

瑾瑜爱上猫
2018/05/23
0
0
关于css margin,你需要知道的一切

原文:www.smashingmagazine.com/2019/07/mar… 译者:前端小智 为了保证的可读性,本文采用意译而非直译。 当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部...

前端小智
07/31
0
0
关于 CSS margin,一些让你模糊的点

原文:www.smashingmagazine.com/2019/07/mar… 译者:前端小智 为了保证的可读性,本文采用意译而非直译。 为了回馈读者,《大迁世界》不定期举行(每个月一到三次),现金抽奖活动,保底200...

前端小智
09/11
0
0
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
2018/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部