个人中心
今日签到
私信列表
消息中心
搜索全站

扫码关注官方微信

扫码下载APP
返回顶部
星点互联edus视频培训演示站 › 论坛版块 › 课堂讨论 › 请问如下为什么div会把margin伸出到header之外 ...
超级玛丽 关注Ta
  • 发帖数42
  • 粉丝1

现就职于某世界500强区块链团队，从事区块链底层研究以及BAAS平台搭建。精通区块链底层存储、共识等技术，职业方向偏重联盟链体系

  • 最佳新人

    注册账号后积极发帖的会员

  • 活跃会员

    经常参与各类话题的讨论，发帖内容较有主见

  • 热心会员

    经常帮助其他会员答疑
阅读Ta更多精彩帖
阅读排行
返回列表 发新帖

[前端开发] 请问如下为什么div会把margin伸出到header之外

[复制链接]
超级玛丽 显示全部楼层 发表于 2020-11-30 21:24:45 |阅读模式 打印 上一主题 下一主题
未解决1
58 1
请问如下为什么div会把margin伸出到header之外
前端开发课堂讨论
超级玛丽2020-11-30 21:24:45
请问如下为什么div会把margin伸出到header之外，如何，让他向上的margin在header内，就是从margin的border算起？


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <header style="margin:2vh;height:10vh;border-radius:1em;background-color:red">
  9. <div style="margin:5vh">电站通讯</div>
  10. <div style="margin:5vh">通讯正常</div>
  11. </header>
  12. </body>
  13. </html>
复制代码


免责声明：本文不代表本站立场，且不构成任何建议，请谨慎对待。

版权声明：作者保留权利，不代表本站立场。

前端

相关帖子
回复

使用道具 举报

精彩评论1

冻GoldenJoe 显示全部楼层 发表于 2020-11-30 21:25:22
主要是因为 header 没有设置为 BFC 块， 而且你给 header 设置了 height:10vh， 这个高度不够包含下面两个div。

可以把header设置为BFC块， 再去掉header的height， 具体解决如下：

  1. header {
  2.     margin:2vh;
  3.     border-radius:1em;
  4.     background-color:red
  5.     overflow:hidden;
  6. }
复制代码

加
overflow
这样header成为了 BFC块， 就能包含住内部的元素了。

回复

使用道具 举报

发布主题
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

星点互联 成立于2014年8月，是目前国内优秀的开源技术社区，拥有超过300万会员，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作