margin-top中的坑点

最新推荐文章于 2021-06-03 21:07:27 发布

WangXiaoYu1991

最新推荐文章于 2021-06-03 21:07:27 发布

阅读量488

点赞数

分类专栏： css样式文章标签： margin-top坑点 css

本文链接：https://blog.csdn.net/WangXiaoYu1991/article/details/54709708

版权

css样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先一言不合，先上代码

我们可以看出，给box2添加了百分之10的margin-top 按照常理，应该是box1的的百分之10,所以是50px; 可是实际上是，下图

从图中可以发现box2的margin-top是50px，是按照按照box1宽度的百分之10来定的。

从而得出结论：margin-top 当设置为百分比时候，是按照父级的宽度，而不是按照父级的高度。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WangXiaoYu1991

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS - 盒模型布局 - margin 陷阱（父子、兄弟）

LIN的博客

09-25

1336

目录 margin 陷阱：内联块中对于相邻快的影响 margin陷阱 - 兄弟布局 margin陷阱 - 父子布局父子 - 解决方法一：固定父亲（border-top）父子 - 解决方法二：使用padding margin 陷阱：内联块中对于相邻快的影响 <!DOCTYPE html> <html> <head> <meta cha...

CSS浮动三：盒子模型示例（重点：padding空间占据问题）

小枯林的博客

12-22

1016

目录一：盒子模型：div设置width，height；溢出隐藏处理：overflow: hidden；margin：外边距示例 1.初始代码：两个div，未添加任何效果 2.设置div尺寸如width: 200px;height: 200px; 3.div溢出隐藏处理：overflow: hidden; 4.div的margin：外边距示例（1）margin前置说明（2）使用通配符*设置所有对象的外边距为0px：（3）设置div的margin：二.padding...

参与评论您还未登录，请先登录后发表或查看评论

margin的坑

qq_41818857的博客

01-12

413

使用margin遇到的坑 1、比如两个同级盒子分别设置margin-top:20px，margin-bottom:30px;理想状态下两个盒子之间的间距30+20=50px，结果两个盒子之间的间距只有30px. <style> /* 上下外边距叠加的时候，以值大的为准 */ .box1 { width: 200px; height: 200px; b...

css中margin的几个坑

qq_45758147的博客

06-03

293

因为是初学者，所以以下言论仅代表个人的学习心得和总结如有错误请广大网友指教。 1,当兄弟块元素都设置了margin,但是却显示不出来？因为兄弟kuai

浮动和清浮动，内外边距和margin的坑

等，你的到来。

10-11

4255

浮动：使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。可以往left，也可以往right 一般建议用ul.f>li.s编写，（ unorder list无序标签，需搭配li作为子标签）, 用div也可以，但是有些浮动效果做不到。特性： 1.浮动的元素排在同一排 2.浮动的元素内容撑开高度 3.浮动的元素支持所有的CSS样式 4.浮动的元素脱离文档

margin没有reset带来的坑，以及高度塌陷问题

祥哥的说

04-03

492

问题现象：问题描述： 1、右侧的nav-list，与左侧的nav-info应该在同一行上，结果却发生了错位。问题分析：（1）借助调试台，可以看到整个导航栏的宽度是30px,这是有.nav（css）样式决定的，正常情况下， <div class="w">所对应的宽度也应该是30px,这样它所包含的<div class="user-info"> <ul...

margin-bottom无效问题以及div里内容动态居中样式!

weixin_34220179的博客

04-27

694

最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图: , 刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料发现: margin-bottom是下方的外边距，并不能让元素向下方移动，margin-top作为上边距，把元素“推”了下去。如果希望图标距离下方30px，那么可以试试在ul上设置posit...

细说CSS中margin属性的使用

09-24

在本文中，我们将深入探讨`margin`的一些不常见特性，以及那些我们在日常开发中可能遇到的“坑”。首先，我们要了解CSS的盒模型。盒模型分为内容盒（Content Box）、内边距盒（Padding Box）、边框盒（Border Box...

记录在el-table中使用el-popover遇到的坑

XIYUXU的博客

12-03

3512

由于项目需要实现在表格中删除前进行提示，最终效果如下图。但在开发过程中点击删除popover弹框不出现，在网上找了很多方法都不能解决问题，就综合了一下。解决方法： html部分： <el-table-column label="操作"> <template slot-scope="scope"> <el-popover ...

BootstrapTagsInput-基础避坑指南

weixin_33973600的博客

12-05

1924

2019独角兽企业重金招聘Python工程师标准>>> ...

margin-top塌陷问题的现象与解决的具体方法

09-22

主要介绍了margin-top塌陷问题的现象与解决的具体方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

CSS中margin不会撑开盒子

HarryWg的博客

03-27

3479

之前在上网查margin对盒子大小影响的时候发现全部都是关于“父子盒子同时定义margin-top|bottom，那么父盒子上边会塌陷至与子盒子上边重合”这样的问题，对于其他情况margin对盒子的影响没有涉猎，在此进行测试。那么在一个盒子内放置两个盒子 <div id="father"> <div id="son1"> </div> <div id="son2"> </div&g

CSS中碰到的一些坑

阿俊的博客

07-18

670

目录一、外边距（margin）合并二、margin-top塌陷三、内联元素及内联块元素间隙问题四、清除浮动一、外边距（margin）合并当两个垂直的外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，而不是二者之和。解决方法如下： 1、利用这种特性 2、只设置一边的外边距，一般只设置margin-top，这样垂直方向只有一个...

margin-top塌陷问题的现象与解决

FreeSpider

05-26

1万+

margin-top塌陷问题什么是margin-top塌陷 margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。在未给子元素（绿色部分）添加margin-to...

CSS中margin-top塌陷问题的解决方案

前端学习小白的博客

04-30

895

本文主要针对margin属性的两个坑和解决方法进行分享,相信通过本文的介绍你对margin属性一定会有深刻的认识。 margin属性外边距是元素边框与周围元素相距的空间。使用margin属性可以设置外边距。设置方法和 padding 类似，同样也提供了四个方向的 margin-top/margin-right/margin- bottom/margin-left 。 margin:...

margin和padding的坑

aliven1的博客

03-29

2394

有些情况，元素设置的padding部分，不会触发元素绑定的一些事件，像click等，但是如果换成子元素的margin,就没问题了

css3 中 margin-top使用的注意点

Genius_S_的博客

08-17

2087

最近在写一个前端页面的时候使用了margin-top属性,并且给它赋了一个百分比的属性值,结果页面的出了一点问题.下面做个实验:这个是html代码 <div class="out1"> <div class="inner1"> margin: 50px 100px; </div> </div> <div class="ou

负margin在布局中的运用（*****************************************************************）...

weixin_34242331的博客

11-21

470

一、左右栏宽度固定，中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>左右栏宽度固定，中间栏宽度自适应</title> <style>

经典CSS缺陷--margin塌陷问题和margin合并问题