div边界重合导致margin-top的问题

最新推荐文章于 2022-05-25 15:50:53 发布
最新推荐文章于 2022-05-25 15:50:53 发布
阅读量1.2k 收藏
点赞数
文章标签： css margin-top不起作用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kingsea442/article/details/14076069
版权

前几天遇到个问题，当两个div边界重合时会导致margin-top达不到你想要的效果，看下图；


当我向让B盒margin-top：20px；时会发生A和B会一起向下20px。

解决办法就是别让A与B重合，可以让A盒padding：1px；等等总之不让A与B重合就行了。其他解决办法也是可行的，例如overflow：hidden；

程序员王小黑
关注
关于DIV margin-top失效的解决办法
web开发技术
07-26 1241
用DIV+CSS布局网页内容时，常常会遇到一个问题：就是当前DIV样式设置了上边界缩进margin-top属性，但是显示出来的效果却是没有缩进。这种情况出现在前面放置的DIV设置了浮动属性， 后跟着的Div的上边界缩进就不能正常显示。下面我们分析两种情况，代码如下： <div style="width:500px; float:left; height:300px; margin:5px">此处显示新 Div 标签的内容</div> <div style="wi
CSS的学习记录
m0_60518344的博客
08-17 200
CSS分为两部分：CSS的选择器, CSS的属性。 CSS的引入方式 - 内联样式(行内样式) 缺点：样式与结构冗余 优点：优先级较高 内联样式表就是把css代码直接写在现有的HTML标签中 注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，多条css样式写在一起中间用分号隔开。 代码： 效果： - 内部样式表 缺点：样式的复用率较低 优点：样式与结构分离 内部样式表可以同时为多个元素设置样式 注意点: -style标签要写在head标
[css]margin-top重叠
weixin_33834137的博客
02-13 66
两个嵌套的div margin-top无效的解决办法
hyy615545936的博客
04-01 637
1.给下层的div 属性  display:inline-block; 2.给父元素属性overflow:hidden;清除浮动 3.给绝对定位
边框重叠现象，小的div会把大的div顶下来
weixin_30263073的博客
04-09 149
在父级div中，设置 overflow: hidden; 转载于:https://www.cnblogs.com/Jxliu/p/8758683.html
margin-top重叠问题
lilyheart的博客
10-09 1627
父子div的margin-top重叠问题，看如下示例： &lt;div class="div1"&gt; &lt;div class="div2"&gt; &lt;/div&gt; &lt;/div&gt; .div1{ width:200px; height:200px; background: green; } .div2{...
解决div布局中第一个div(display:block)的margin-top在浏览器中显示无效果问题
qq_30541261的博客
05-08 1718
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         mar
margin的上下重叠bug
m0_46387675的博客
03-02 425
margin的上下重叠bug 两个同辈元素上下排列，给上元素设置下margin，给下元素设置上margin，那么两个元素的距离取两个margin值中最大的那个值，又叫margin的重叠现象 父子元素，子元素的margin-top会错误的传递给父元素，子元素在父元素内看不到margin-top的设置 需要注意的是，margin重叠只发生在块状元素，且具有垂直相邻的关系才会发生重叠。margin...
CSS中解决父子边界重叠问题
m0_53521757的博客
07-01 2373
CSS中解决父子边界重叠问题 什么情况会出现父子边界重叠问题？        子元素设置了margin-top属性传递给了父元素，导致子元素和父元素相邻的垂直外边距发生重叠。 即： CSS样式代码 #div_01{ height: 300px; width: 300px; background-color: antiquewhite; } #div_02{ margin-
理解margin塌陷和margin合并及其解决方案.docx
10-26
在CSS布局中，margin塌陷是指在嵌套元素中，子元素的上外边距（`margin-top`）与父元素的上外边距重合时，它们不会简单地叠加，而是会合并成一个外边距。这种合并会导致子元素相对于父元素的位置不是预期中的那样。...
CSS | 关于Padding和Margin (Padding百分比和Margin负边距)
liuj4 | 自娱自乐
08-13 465
Padding和Margin天天用，但有些地方其实很值得考究 1. Padding和Margin的百分比设置： Padding和Margin的百分比设置是参照父元素的宽度的 2. 两个块级盒子在垂直方向上的margin不会相加，而是合并：保留大的那一个,比如 .box1{ margin-bottom:20px;display:block} .box2{ margin-top...
关于子元素的margin-top影响父元素的问题
SOALIN的博客
11-17 282
margin重合(外边距重叠)及解决方法
liuye066的专栏
05-25 1万+
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
两个嵌套的Div,内部Div的margin-top失效
雾里看花叹朦胧
12-26 4918
对内部的div设置margin-top时，内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值。实例如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {
div边框重叠 解决办法
热门推荐
ajiaoyiyi的博客
06-13 2万+
解决办法：设置边框的相反数，比如边框为1PX, 则给每块的div添加margin-right：-1px; margin-bottom:-1px.
关于内层DIV设置margin-top不起作用的解决方案
weixin_33717117的博客
05-21 417
（一） 近日在做另外一个站点的时候，又遇到这个问题，决定好好的研究解决一下。 代码如下： <div>上部层</div> <div> <!--父层--><div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示，子层距离父层顶部有...
5110-微信小程序健身房私教预约微信小程序+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
Fast_integration_dependencies_in_spring_boot.是一个快速_fastdep.zip
最新发布
09-15
Fast_integration_dependencies_in_spring_boot.是一个快速_fastdep
05-Python数据类型-列表的相关运算
09-15
05_Python数据类型_列表的相关运算 文章对应的 jupyter notebook 源文件，可以用来做练习。欢迎下载使用。 目录如下： Python的基础数据类型 列表运算符 赋值和深浅拷贝 赋值 浅拷贝 深拷贝 附件
<div class="col-lg-8 col-md-8 col-sm-8"><div style="margin-top: 1em;">药品名称<input class="form-control" value=""></div><div style="margin-top: 1em;">编号<input class="form-control" value=""></div><div style="margin-top: 1em;">描述<textarea class="form-control"></textarea></div></div>使用CSS定位到药品名称这个输入框
06-03
margin-top: 1em; } ``` 这个代码的作用是选中第一个 class 为 `.form-control` 的元素，并设置它的上边距为 1em。由于药品名称这个输入框是第一个 `.form-control` 元素，所以它会被选中并设置上边距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员王小黑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值