相关疑难解决方法(0)
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标签上有填充或边框.
必须有更好的最佳实践解决方案吗？这一定很常见.
推荐指数
解决办法
查看次数
为什么不顶部:0相对于身体的绝对定位元素？
您可以在下面的代码中看到,h1向下推动身体,绝对定位的块.absolute不会粘在顶部.但是你也可以看到同一个块粘在其父级的顶部.wrapper.为什么？
我不是在问这个伎俩; 我知道如何,例如填充而不是边缘到h1,或clearfix到父级等等.
我只对一件事情感兴趣:为什么h1保证金推低了body,但是没有推倒.wrapper？
body {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
background-color: silver;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: darkblue;
}
.wrapper {
position: relative;
overflow:hidden;
width: 50%;
height: 200px;
overflow: hidden;
background-color: yellow;
}
.wrapper > .absolute {
background-color: darkcyan;
}<div class="absolute"></div>
<h1>Some title</h1>
<div class="wrapper">
<div class="absolute"></div>
<h1>Some title</h1>
</div>好的,我会尽量更清楚.如果你点击下面的链接,你可以看到我的JSFiddle.有background-color: silver在 …
推荐指数
解决办法
查看次数
利润率和负利润率
我一直认为我理解利润和负利润,但显然我没有!我刚刚开始设计并遇到问题.
我有一个div(hill3Cont)和另一个div(hill3Hill)嵌套在里面,这是他们的CSS.
#hill3Cont
{
width: 100%;
background-image: url("images/grass.jpg");
}
#hill3Hill
{
margin: -100px 0 0 0;
height: 600px;
width: 100%;
background: url("images/hill3.png") no-repeat center top;
}
我已经在子div的顶部应用了一个负余量,希望它能将这个内容推到父div的边界之外.但事实并非如此,它并没有动.如果我应用一个正余量,它会将父div与其中的孩子一起推下去.
我可以使其行为正常的唯一方法是使用隐藏在父div上的边框或溢出,但设计将不允许这些中的任何一个(我不希望隐藏边框和溢出隐藏子项).
也许这只是漫长的一天,我错过了一些常见的东西!提前谢谢了.
编辑:我有一个解决方案,我在父div上放了一个填充顶部,填充:1px 0 0 0.它适用于我的设计,所以我很高兴,但仍然很想知道发生了什么.
推荐指数
解决办法
查看次数
意外的<body>身体行为,因为它被孩子的边缘顶部推下
HTML问题看起来总是那么简单,我几乎感到尴尬地问他们.但是,就是这样,我不知道为什么会这样.
在这个小提琴http://jsfiddle.net/o5ee1oag/2/正在被标题的边距(50px)推下来:
<body>
<div id="background"></div>
<header>
<ul>
<li>Button 1</li>
<li>Button 2</li>
</ul>
</header>
</body>
因此div#background {position:absolute; 被推倒了.然后我去Firebug,应用背景:红色; 身体和整个区域变红,包括边缘.
1)为什么会发生这种情况,身体距离顶部是50px？
2)如何防止身体被压下？
谢谢 :).
推荐指数
解决办法
查看次数