相关疑难解决方法(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标签上有填充或边框.
必须有更好的最佳实践解决方案吗？这一定很常见.
推荐指数
解决办法
查看次数
嵌套div中的margin-top
我margin-top在嵌套div中有一个问题- 当我应用于margin-top嵌套div时,边距应用于父div 而不是嵌套div.
有任何想法吗？
推荐指数
解决办法
查看次数
DIV中具有边距的子元素
我需要两个连续的div元素(有背景)无缝接触,一个在另一个之下.但是,当我将子p元素放入底部时,此布局会中断div.p元素的边缘迫使两个div元素之间存在空白.这是一种奇怪的行为,因为我期望p保留在内容和背景区域内div.它在Firefox,Chrome和IE 8上呈现相同的方式.
<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>
这是它的样子.
我可以通过将边距更改为p元素的填充来解决这个问题,但是我还必须使用标题元素,列表元素以及我想在开头使用的任何其他元素来执行此操作div.这是不可取的.
有人可以启发我:我错过了盒子模型的警告吗？有没有一种简单的方法可以解决这个问题,最好是通过修改它的风格div？
推荐指数
解决办法
查看次数
CSS margin-top <h1>影响父母的保证金
我现在已经找了一段时间来解决这个问题并没有找到答案.在向元素添加边距顶部时,在我的情况下,它主要发生在标题上.在许多情况下,保证金顶部与父母共享.
HTML
<div>
<h1>My title</h1>
</div>
CSS
div{
padding:20px;
}
h1{
margin-top: 20px;
}
前面代码的结果也会为div添加margin-top,就好像我们有以下内容:
div{
padding:20px;
margin-top:20px; /*this one is implemented by the browser, not written on the code*/
}
解决这个问题的方法是通过添加overflow:auto到父级,在这种情况下,div css具有:
div{
padding:20px;
overflow:auto;
}
虽然前面的例子解决了这个问题,但我不清楚为什么??? .这与"利润率下降"有关,显然保证金与母公司的保证金相结合.但为什么????
我们怎么知道父母何时会崩溃孩子的边缘,什么时候不知道,这个块的这个属性的目的是什么,或者它是一个bug？
这是问题的JSFiddle演示.
这是解决方案的JSFiddle演示
谢谢.
推荐指数
解决办法
查看次数
为什么一个元素有位置:固定移动与未定位的兄弟？
关于如何解决这个问题(添加top: 0),有很多关于SO的问题,但没有一个问题试图解释标题运动背后的原因.我更好奇为什么会这样.
<header>Project Header</header>
<main class="container" id="layout-mainContent">
<div class="row" id="first-row">somecontent</div>
</main>
header {
position: fixed;
}
#layout-maincontent {
margin-top: 90px; //moves header down.
}
类似问题清单,但没有任何理由:
认为固定标题粘在浏览器窗口的顶部并且不应该因为另一个非定位的非子,非父div(也称为兄弟)而移动似乎是合理的.ESP.因为固定标题超出正常文档流程.关于固定定位的MDN
假设: 混淆源于固定元素相对于浏览器窗口的想法.这是事实,但是使用视口计算.视口使用常规文档流中的元素计算.因为文档流中的第一个div是非标题div,所以视口在应用margin-top之后开始.这只是猜测,我很乐意看到有人确认或纠正我.
推荐指数
解决办法
查看次数
Box模型有什么用？儿童保证金影响父母
HTML和CSS有时会让我大吃一惊.
带边框的DIV显示元素及其内容的完整高度的背景颜色.为什么没有边界,DIV会假设(反向继承？)它的孩子的边缘？
作为一个例子,这里是一个JSFiddle,说明有和没有边框的行为.
有没有人想解释这是一个"功能",而不是某种错误？
更新:向父级添加1px填充是一个快速修复.
推荐指数
解决办法
查看次数
为什么设置此子元素的上边距会将其父容器向下推？
我有两个div:
<div id="headercontainer" data-type="background" data-speed="5">
<div id="headersubcontainer">
<h1>Simple and Cost Effective Web Solutions</h1>
</div>
</div>
<div id="teamcontainer" data-type="background" data-speed="5">
<div id="teamsubcontainer">
<h1>Developed by a dedicated team</h1>
</div>
</div>
两者都有100%的宽度和800px的高度.第一个标题是我设置了一个上限:160px.如图所示,它不会将标题向下移动到其父div中,而是将父div移动到其中,如下所示:
这是我的相关CSS:
h1{
font-size: 48px;
font-family: $header-font-stack;
font-weight: 100;
width: 400px;
}
#headercontainer{
width: 100%;
height: 800px;
background-image: image-url("background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
#headercontainer h1{
text-align: center;
margin: 0px auto;
margin-top: 160px;
color: #610B21;
}
使用填充显然工作,但我想更合适并使用边距.如何设置上边距并将标题下移到容器中而不用移动容器？
推荐指数
解决办法
查看次数
一个CSS绝对定位之谜
考虑下面的网页.它<img>的位置绝对与其父级相关,当我在Safari或Firefox上加载此页面时,会<img>出现在右上方,如预期的那样(请参阅第一张图片).但是,当边框从中移除时<div>,例如,通过设置border-width: 0,<img>位置本身绝对相对于<p>标签,它的兄弟!见图2.为什么是这样？边界应该有什么不同？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin: 0;
}
div {
position: relative;
left: 0;
top: 0;
border: 1px solid red;
}
img {
position: absolute;
right: 0;
top: 0;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div>
<img src="content/en/flag.png" />
<p>This is a test</p>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
在另一个div里面的div到div
我有两个具有背景图像的div,我想为第二个div添加边距,但它正在创建空白区域.
如何在保持div在另一个div内的同时添加上边距？
<div class="background">
<div class="logo">
</div>
</div>
.logo {
background-image: url(image/logo2.png);
height:40px;
width:400px;
margin-left:100px;
display:block;
margin-top:20px;
}
.background {
background-image: url(image/empback.png);
width:100%;
height:94px;
min-width:1345px;
}
推荐指数
解决办法
查看次数
HTML水平对齐DIV子项
我是HTML和CSS开发的新手.我希望div div中的所有子节点水平对齐
我的HTML:
<div class="parent">
<h1>Hello</h1>
<h1>World</h1>
</div>
我试着用inline-block在.parent 像其他人则建议,但仍输出为:
Hello
World
代替
Hello World
有任何想法吗？
推荐指数
解决办法
查看次数