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；

程序员王小黑
关注
CSS的学习记录
m0_60518344的博客
08-17 201
CSS分为两部分：CSS的选择器, CSS的属性。 CSS的引入方式 - 内联样式(行内样式) 缺点：样式与结构冗余 优点：优先级较高 内联样式表就是把css代码直接写在现有的HTML标签中 注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，多条css样式写在一起中间用分号隔开。 代码： 效果： - 内部样式表 缺点：样式的复用率较低 优点：样式与结构分离 内部样式表可以同时为多个元素设置样式 注意点: -style标签要写在head标
margin的上下重叠bug
m0_46387675的博客
03-02 429
margin的上下重叠bug 两个同辈元素上下排列，给上元素设置下margin，给下元素设置上margin，那么两个元素的距离取两个margin值中最大的那个值，又叫margin的重叠现象 父子元素，子元素的margin-top会错误的传递给父元素，子元素在父元素内看不到margin-top的设置 需要注意的是，margin重叠只发生在块状元素，且具有垂直相邻的关系才会发生重叠。margin...
[css]margin-top重叠
weixin_33834137的博客
02-13 66
两个嵌套的div margin-top无效的解决办法
hyy615545936的博客
04-01 638
1.给下层的div 属性  display:inline-block; 2.给父元素属性overflow:hidden;清除浮动 3.给绝对定位
边框重叠现象，小的div会把大的div顶下来
weixin_30263073的博客
04-09 150
在父级div中，设置 overflow: hidden; 转载于:https://www.cnblogs.com/Jxliu/p/8758683.html
margin-top重叠问题
lilyheart的博客
10-09 1627
父子div的margin-top重叠问题，看如下示例： <div class="div1"> <div class="div2"> </div> </div> .div1{ width:200px; height:200px; background: green; } .div2{...
解决div布局中第一个div(display:block)的margin-top在浏览器中显示无效果问题
qq_30541261的博客
05-08 1719
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         mar
理解margin塌陷和margin合并及其解决方案.docx
10-26
在CSS布局中，margin塌陷是指在嵌套元素中，子元素的上外边距（`margin-top`）与父元素的上外边距重合时，它们不会简单地叠加，而是会合并成一个外边距。这种合并会导致子元素相对于父元素的位置不是预期中的那样。...
CSS | 关于Padding和Margin (Padding百分比和Margin负边距)
liuj4 | 自娱自乐
08-13 467
Padding和Margin天天用，但有些地方其实很值得考究 1. Padding和Margin的百分比设置： Padding和Margin的百分比设置是参照父元素的宽度的 2. 两个块级盒子在垂直方向上的margin不会相加，而是合并：保留大的那一个,比如 .box1{ margin-bottom:20px;display:block} .box2{ margin-top...
如何给布局设置边框的时候边框能不重合
ZQY1436556395的博客
05-19 669
**问题：**我们再写页面的时候，经常会遇到需要给每个item加边框的情况，又因为每个item是相邻的，所以如果给每个item设置边框的话，边框会出现重合的现象, **解决办法一：**如下所示可以给item重合的边设置margin为负的边框宽度 <style> ul { list-style: none; margin: 0; padding: 0; } /* 布局样式 */
关于子元素的margin-top影响父元素的问题
SOALIN的博客
11-17 283
margin重合(外边距重叠)及解决方法
liuye066的专栏
05-25 1万+
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
两个嵌套的Div,内部Div的margin-top失效
雾里看花叹朦胧
12-26 4919
对内部的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 418
（一） 近日在做另外一个站点的时候，又遇到这个问题，决定好好的研究解决一下。 代码如下： <div>上部层</div> <div> <!--父层--><div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示，子层距离父层顶部有...
OBS-Studio-30.2.3-Windows.zip
最新发布
09-23
OBS-Studio-30.2.3-Windows.zip
ChanjeeDlnaTool-v1.0 推送电脑上的文件到安卓电视大屏，实现音视频播放和apk安装
09-23
详情参考：https://blog.csdn.net/title71/article/details/142462255?spm=1001.2014.3001.5501 文件里面含有视频使用教程 一.windows+Android大屏 使用投送教程： 准备 0.电视机和电脑要在同一网络下面 1.使用u盘安装chanjeeDlnaTool.apk到电视机 2.将Windows软件拷贝到合适目录，将.mp4 /.flac /.jpg ...文件拷贝到软件目录的www/files文件夹下面 投送 1.打开Android电视机大屏的刚安装的软件，找到左上角显示的电视机的ip地址 2.双击打开Windows软件的ChanjeeDlnaTool.exe文件，有弹窗提示防火墙网络，请点击允许 3.在Windows软件的ip地址栏输入Android电视机大屏上面的ip地址，并在Windows软件点击认证 4.认证完成后Windows软件下方蓝字会提示Binging successful 就说明绑定成功，此时就可以在Windows软件选择本地文件向Android大屏投送文件了
CODESYS是PLC软件编程工具.docx
09-23
CODESYS是一款功能强大的PLC（可编程逻辑控制器）软件编程工具，广泛应用于工业自动化领域。以下是对CODESYS的详细介绍： 一、基本概述 定义：CODESYS是Controlled Development System的缩写，是可编程逻辑控制PLC的完整开发环境。 开发商：CODESYS软件商是德国Smart software solution GmbH，该公司位于德国巴伐利亚州肯普腾市。 最新版本：CODESYS V3（国内PLC用户使用的版本多为CODESYS V2.3）。V3版本在软件架构上有了很大的改善，朝安全软件的方向发展，正在申请TUV关于EN 61508的SIL认证。 二、主要特点 开放性：CODESYS是一个开放的软件平台，允许第三方开发者在其上开发定制化的解决方案，适应不同厂商的PLC设备，具有很高的灵活性和扩展性。 跨平台：CODESYS可以运行在多种不同的操作系统上，包括Windows、Linux和嵌入式系统（RTOS），提高了开发效率和可移植性。 多语言支持：支持IEC61131-3标准下的IL、ST、FBD、LD、CFC、SFC六种PLC编程语言，用
广西中医药大学在湖南2021-2024各专业最低录取分数及位次表.pdf
09-23
全国各大学在湖南2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
<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、付费专栏及课程。

余额充值