div嵌套margin-top属性问题

最新推荐文章于 2023-07-19 22:52:53 发布
最新推荐文章于 2023-07-19 22:52:53 发布
阅读量525 收藏
点赞数

其中margin-top的外边距的效果是找到了body；

造成这种现象的原因是内部div的父容器的padding为0px;


解决办法：

1,父容器的overflow:hidden;

2,父容器的position:absolute;

3,将margin-top变为父容器的padding-top:

ringtoping
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV多层嵌套margin-top的BUG问题
01-19
今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下： html: 复制代码代码如下:<div class=”logo”></div> <div class=”login_text”> <div id=”error” class=”errorstyle”></div> </div> css: ...
div嵌套引起的margin-top不起作用
qq_37477349的博客
08-26 678
通常大家在制作网页的过程中会遇到很多棘手的问题，比如我在写一个页面的时候，遇到了div嵌套引起的margin-top不起作用，对内部的div设置margin-top时，内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值，为什么会出现这种情况？？？ 　　这是因为嵌套div中margin-top出现转移，在部分浏览器中，两个嵌套的div，如果外层父元素div的padding值为0，那么内层div的margin-top，margin-bottom值都会转
关于DIV margin-top失效的解决办法
web开发技术
07-26 1193
用DIV+CSS布局网页内容时，常常会遇到一个问题：就是当前DIV样式设置了上边界缩进margin-top属性，但是显示出来的效果却是没有缩进。这种情况出现在前面放置的DIV设置了浮动属性， 后跟着的Div的上边界缩进就不能正常显示。下面我们分析两种情况，代码如下： <div style="width:500px; float:left; height:300px; margin:5px">此处显示新 Div 标签的内容</div> <div style="wi
流畅易懂CSS教程·margin
最新发布
HELLO_E_SIR的博客
07-19 891
margin，外边距，指本元素边框向外的距离。而在实际使用中，可以朝四个方向设置外边距，如下所示。也许有的小伙伴已经在开发中使用过，觉得简单，不就是设置与其他元素的距离而已嘛，有什么难的？我起初也这么认为，但是在深入学习后，发现margin在不同情况下，会采取不同的机制，这也会对我们未来的开发有着很重要的影响。话不多说，我们直接从实际使用中去探讨该属性的使用。
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)
IT_Helianthus的博客
05-20 7623
文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距，该属性有多个值： 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...
Div多层嵌套margin-top的bug问题及解决方案
dream_start_at_2017的博客
10-18 581
bug: 如果父元素和第一个子元素没有float的情况下，给第一个子元素添加margin-top属性会错误的传递给父元素，出现父元素与子元素一起向下移动的问题。 eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-top-bug问题及解决方案</title> <style> *{ margi
IE7、IE8、ff下的margin-top问题 折叠margin
09-25
今天小组一同学做网站时，遇到一个关于margin-top兼容问题：有两个div,其中div1嵌套div2,而在div2里面设置margin-top后，在IE8、ff和chrome下显示的效果竟然不是想要出现的结果，而在IE7下面效果正确。
jquery实现具有嵌套功能的选项卡
11-23
通常情况下，大家见到的选项卡都是没有嵌套功能的，也就是说就是完成了一层切换效果，本章节分享一段代码实例，实现了选项卡的嵌套功能，也就是选项卡中嵌套有选项卡功能，也就能够容纳更多... margin-top:10px; mar
docs:官方https
04-29
Appwrite文档 :memo: 官方的文档源代码。 :rocket: 贡献 克隆存储库 更新，添加或修复了当前文档 内容准备好后，提高PR 内容准则 ... div class =" ide margin-top-small " data-lang =" ruby " data-l
关于内层DIV设置margin-top不起作用的解决方案
weixin_33717117的博客
05-21 408
（一） 近日在做另外一个站点的时候，又遇到这个问题，决定好好的研究解决一下。 代码如下： <div>上部层</div> <div> <!--父层--><div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示，子层距离父层顶部有...
div里面的margin-top失效
weixin_34304013的博客
03-17 200
div标签中的元素margin-top失效的解决方法 元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效，下面有个不错的解决方法，感兴趣的朋友可以参考下 如题。 问题很奇葩。元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效。同学经验提...
div与父级div的margin-top没有效果的原因
qq_40128591的博客
04-11 420
用谷歌浏览器检查代码时，下图是我们设置的子级div的外边距范围提示， 但是我们吧鼠标移动到父级div时发现它的margin-top范围并没有生效 其实这是因为margin-top有的浏览器判断为子级边框到父级边框的距离， 解决方法：so我们给他的父级div 加一个border：就解决了颜色设置跟页面背景一样的就可以了， ...
css 块级元素 div 包含 div margin-top 失效问题
mrs_qian的博客
07-21 295
当块级元素包含块级元素时,内部块级子元素margin-top会失效,会导致外层块级元素生效margin-top熟悉,解决方法就是把内部块级子元素设置为displayinline-block就可以了。
css-子div设置margin-top后，父div与子div一起下移
weixin_34238642的博客
11-19 257
根据海玉的博客 这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 bord...
html5中margin是什么意思,html中topmargin属性
weixin_39875167的博客
06-22 1662
html标签中的leftmargin是什么属性？而topma左边距。js获取css属性，更改margin-top属性，给每个a标签 为负数就是向反方向移动。 比如 这两个div中间应该空5px，因为左边的div在右边留有5px的边距。 如果改成 意思就是这两个div不仅中间没空，而且还有3px的部分是重叠在一起的。 自己写几个div试验下就知道了。span标签设置margin-top没有效果呢？是...
html里top是向下,html中topmargin属性
weixin_28879085的博客
06-03 677
html标签中的leftmargin是什么属性？而topma左边距。span标签设置margin-top没有效果呢？是行内元素，span只有margin-left和margin-right才有效果。要想margin-top生效就要把span转给块级元素才行。在span的css中加入以下属性即可。 .span{display:block;}html *margin-top:中的*号什么意思兼容性问题...
CSS（margin）问题嵌套div中margin-top转移
xiaoyun的专栏
10-09 3032
margin叠加了，你给外边的盒子一个border或者padding就好了，这个叫空白边叠加，
两个嵌套的Div,内部Div的margin-top失效
雾里看花叹朦胧
12-26 4874
对内部的div设置margin-top时，内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值。实例如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {
CSS top、margin-top和padding-top的区别
热门推荐
王景迁的博客
07-26 1万+
参考文献 CSS padding 属性 CSS里的padding是什么意思？ CSS margin 属性 top、margin-top的区别 padding指内边距，是盒子里面内容到边框的距离，不允许使用负值。 padding:10px 5px; 上内边距和下内边距是10px，右内边距和左内边距是5px。 padding:1px 2px 3px 4px; (上
.container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100vh; } .sidebar { background-color: #f0f0f0; } .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .box { flex-grow: 1; /* 平分宽度 */ background-color: #ccc; margin-bottom: 10px; } .box:nth-child(n+3) { border-radius: 10px; margin-top: 10px; margin-left: 20px; } <div class="container"> <div class="sidebar"> </div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> <div class="boxSon"></div> <div class="boxSon"></div> <div class="boxSon"></div> </div> <div class="box"></div> </div> </div>补全代码将右侧第四个盒子分割为三个子盒子 要求子盒子高度等于父盒子,宽度将父盒子不均等分,且三个子盒子有一定间距
05-24
可以将右侧第四个盒子设置为 display: flex，并在其中嵌套三个子盒子，然后给父盒子设置 margin-left: 20px，再给子盒子设置 flex-grow: 1 和 margin-right: 20px 即可实现要求。 修改后的代码如下： ``` .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100vh; } .sidebar { background-color: #f0f0f0; } .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .box { flex-grow: 1; background-color: #ccc; margin-bottom: 10px; } .box:nth-child(n+3) { border-radius: 10px; margin-top: 10px; margin-left: 20px; } .box:nth-child(4) { display: flex; margin-left: 20px; } .boxSon { flex-grow: 1; background-color: #ccc; margin-right: 20px; } .boxSon:last-child { margin-right: 0; } ``` HTML代码： ``` <div class="container"> <div class="sidebar"></div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> <div class="boxSon"></div> <div class="boxSon"></div> <div class="boxSon"></div> </div> <div class="box"></div> </div> </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值