<body>和第一个<div>之间的神秘填充,在向<div>添加边框时消失

普拉泰克·维玛(Prateek Verma)

请参阅此小提琴http://jsfiddle.net/a506r2gh/

在正文和“标题”部分之间出现一个奇怪的填充。如果我在“ header” div上添加了边框,它就会消失。保证金崩溃和保证金似乎并不是这里的问题。

提前致谢!

这是HTML

<body>
    <div class="header">
        <a href="#"><div class="photo"></div></a>
        <div class="footer"></div>
    </div>
</body>

这是CSS

body {
    margin:0; padding:0; background: #999;
}
.header {
    background-color: #422;
    /* border: solid 1px red; */ /* problem goes away if I add border to header */
}
.header .photo {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background: #660;
    margin:50px auto;
}
.footer {
    height:50px;
    background: #303;
    margin-bottom:50px;
}
普拉格

.photo标头中元素的顶部和底部边距为50px,这会影响父级。

为防止这种情况,请添加overflow: auto到中.header

还有其他几种方法可以解决此问题。

我无法说出为什么会发生这种情况,但以下是MDN关于该行为的引文:

如果没有边框,内边距,行内内容,高度或最小高度,以将块的页边距顶部与页边距底部分开,则其顶部和底部页边距将崩溃。

来源

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

<body>和第一个<div>之间的神秘填充,在向<div>添加边框时消失

来自分类Dev

使第一个div元素posititon:absolute(相对于body)使我的后续div隐藏在我的第一个div下

来自分类Dev

按钮向表单添加输入,但只有第一个。不在多个表单/div 上

来自分类Dev

在第一个div上添加类以设置内部div的样式?

来自分类Dev

当我点击第一个 div 以外的另一个 div 时,我会怎么做,然后第一个 div 的 css 会消失?

来自分类Dev

div的第一个孩子

来自分类Dev

顶部的第一个 div

来自分类Dev

使div的宽度为20%,每个div之间都有填充,但不要在第一个左边或最后一个右边

来自分类Dev

添加第二个div后,第一个孩子倒下了

来自分类Dev

CSS DIV标签可填充第一个视图,但不包含内容

来自分类Dev

修复第一个和最后一个div CSS

来自分类Dev

修复第一个和最后一个div CSS

来自分类Dev

在div中获得第一个div

来自分类Dev

将不同的类添加到循环中的第一个div

来自分类Dev

While循环:获取第一个div以添加活动类

来自分类Dev

为什么只有第一个元素被添加到div中

来自分类Dev

将可拖动框添加到与第一个框相同的div中

来自分类Dev

将 className 添加到 React 中数组的第一个 div

来自分类Dev

从数组创建 DOM:<P> 仅添加到第一个 Div,而不是每个

来自分类Dev

当第一个内部绝对定位时,如何使外部div正确堆叠?

来自分类Dev

Javascript 显示/隐藏,在页面加载时显示第一个 div

来自分类Dev

JavaScript 嵌套函数在单击时仅返回第一个 div 的 id

来自分类Dev

在PHP中使用jQuery Ajax在第一个contenteditable div超出高度后,如何添加新的contenteditable div?

来自分类Dev

当某个图像放到div上时,如何向div添加一个类?

来自分类Dev

如何在第一个和最后一个div上删除左边距和右边距

来自分类Dev

创建一个通用的javascript或jquery,以在单击div或标签时使div或标签集集中在其内部的第一个输入上

来自分类Dev

内联阻止和第一个孩子div的移动

来自分类Dev

tablethead和第一个tbody列在可滚动div中保持固定

来自分类Dev

DIV上的第一个孩子选择无效

Related 相关文章

  1. 1

    <body>和第一个<div>之间的神秘填充,在向<div>添加边框时消失

  2. 2

    使第一个div元素posititon:absolute(相对于body)使我的后续div隐藏在我的第一个div下

  3. 3

    按钮向表单添加输入,但只有第一个。不在多个表单/div 上

  4. 4

    在第一个div上添加类以设置内部div的样式?

  5. 5

    当我点击第一个 div 以外的另一个 div 时,我会怎么做,然后第一个 div 的 css 会消失?

  6. 6

    div的第一个孩子

  7. 7

    顶部的第一个 div

  8. 8

    使div的宽度为20%,每个div之间都有填充,但不要在第一个左边或最后一个右边

  9. 9

    添加第二个div后,第一个孩子倒下了

  10. 10

    CSS DIV标签可填充第一个视图,但不包含内容

  11. 11

    修复第一个和最后一个div CSS

  12. 12

    修复第一个和最后一个div CSS

  13. 13

    在div中获得第一个div

  14. 14

    将不同的类添加到循环中的第一个div

  15. 15

    While循环:获取第一个div以添加活动类

  16. 16

    为什么只有第一个元素被添加到div中

  17. 17

    将可拖动框添加到与第一个框相同的div中

  18. 18

    将 className 添加到 React 中数组的第一个 div

  19. 19

    从数组创建 DOM:<P> 仅添加到第一个 Div,而不是每个

  20. 20

    当第一个内部绝对定位时,如何使外部div正确堆叠?

  21. 21

    Javascript 显示/隐藏,在页面加载时显示第一个 div

  22. 22

    JavaScript 嵌套函数在单击时仅返回第一个 div 的 id

  23. 23

    在PHP中使用jQuery Ajax在第一个contenteditable div超出高度后,如何添加新的contenteditable div?

  24. 24

    当某个图像放到div上时,如何向div添加一个类?

  25. 25

    如何在第一个和最后一个div上删除左边距和右边距

  26. 26

    创建一个通用的javascript或jquery,以在单击div或标签时使div或标签集集中在其内部的第一个输入上

  27. 27

    内联阻止和第一个孩子div的移动

  28. 28

    tablethead和第一个tbody列在可滚动div中保持固定

  29. 29

    DIV上的第一个孩子选择无效

热门标签

归档