相关疑难解决方法(0)
子元素上的边距移动父元素
我有div(父)包含另一个div(孩子).Parent是body没有特定CSS样式的第一个元素.当我设置
.child
{
margin-top: 10px;
}
最终的结果是我的孩子的顶部仍然与父母对齐.我的父母向下移动10px,而不是让孩子向下移动10px.
我的目标DOCTYPE是XHTML Transitional.
我在这里错过了什么？
编辑1
我的父母需要有严格定义的尺寸,因为它的背景必须从上到下显示在它下面(像素完美).因此,设置垂直边距是不行的.
编辑2
此行为在FF,IE和CR上是相同的.
推荐指数
解决办法
查看次数
CSS边缘恐怖; 边距在父元素之外添加空格
我的css边距不符合我想要或期望的方式.我好像我的标题margin-top会影响它周围的div-tags.
这就是我想要和期望的:
......但这就是我最终的结果:
资源:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
我在这个例子中夸大了边缘.h1-tag上的默认浏览器边距略小,在我的情况下,我使用Twitter Bootstrap,使用Normalizer.css将默认边距设置为10px.不重要,重点是; 我不能,不应该,不想改变h1标签上的边距.
我想这跟我的其他问题类似; 为什么这种CSS margin-top风格不起作用？.问题是我该如何解决这个具体问题？
我已经阅读了类似问题的几个主题,但没有找到任何真正的答案和解决方案.我知道添加padding:1px;或border:1px;解决问题.但这只会增加新的问题,因为我不希望在div标签上有填充或边框.
必须有更好的最佳实践解决方案吗？这一定很常见.
推荐指数
解决办法
查看次数
边缘在flexbox中折叠
通常,在CSS中,当父级及其最后一个子级具有边距时,边距会折叠以创建单个边距.例如
article {
margin-bottom: 20px
}
main {
background: pink;
margin-bottom: 20px;
}
footer {
background: skyblue;
}<div id="container">
<main>
<article>
Item 1
</article>
<article>
Item 2
</article>
</main>
<footer>Footer</footer>
</div>如您所见,即使在标签和标签20px上都指定了边距,您也只能在最后一个文章和页脚之间获得边距.articlemain20px
但是,当使用flexbox时,我们40px在最后一篇文章和页脚之间得到一个边距- 20p从文章到主页的整个x边距,以及20px从主页面到页脚的另一个边距.
#container {
display: flex;
flex-direction: column;
}
article {
margin-bottom: 20px
}
main {
background: pink;
margin-bottom: 20px;
} …推荐指数
解决办法
查看次数
如何解开保证金？
缩小CSS中的利润率:http://www.w3.org/TR/CSS21/box.html#collapsing-margins
我理解该功能的目的,但我正在尝试做布局,我无法弄清楚如何关闭它.
CSS教程中通常解释的方法是:
- 添加边框
- 添加填充
当您使用背景图像和固定填充处理像素完美布局时,所有这些都会产生明显的副作用.
有没有办法简单地禁用折叠而不必将额外的像素推入布局？我必须在视觉上影响文档以改变这样的行为,这对我没有任何意义.
推荐指数
解决办法
查看次数
保证金与浮动元素一起崩溃,为什么会增加额外保证金？
更新:Firefox上不显示以下行为.
让我们从以下情况开始:
html {
background: red;
}
body {
margin: 0;
min-height: 100vh;
background-color: green;
}
div {
min-height: 50px;
background-color: pink;
margin-bottom: 50px;
}<div></div>身体用a定义,min-height:100vh我们有一个滚动条,让我们可以看到html.在这里我们有一个保证金塌陷,的边缘div被折叠与机身保证金,从而创造了身体和滚动条后,这个空间.
如果我们参考规范,我们就有这种情况:
当且仅当以下情况时,两个边距相邻:
...
如果父项具有"自动"计算高度,则最后一个流入子项的下边距和其父项的下边距
这div是最后一个流入元素,body并且高度自动,因为我们只指定了最小高度.
现在让我们添加更多可能受此边际影响的元素,并保持边距折叠规则.唯一的方法是添加浮动元素以保持我们div始终是最后一个in-flow元素.
这是新代码:
html {
background: red;
}
body {
margin: 0;
min-height: 100vh;
background-color: green;
}
div {
min-height: 50px;
background-color: pink;
margin-bottom: 50px;
}
.l { …推荐指数
解决办法
查看次数