相关疑难解决方法(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标签上有填充或边框.
必须有更好的最佳实践解决方案吗？这一定很常见.
推荐指数
解决办法
查看次数
车身高度100%显示垂直滚动条
出于好奇,考虑下面的例子,为什么#container div上的边距导致垂直滚动条出现在浏览器中？容器的高度远小于设置为100%的身高.
我已经为除#container之外的所有元素将padding和margin设置为0.请注意,我故意在#container div上省略了绝对定位.在这种情况下,浏览器如何计算身体的高度以及保证金如何影响身体？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
margin-top无法使用clear:both
<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>为什么margin:top"主要数据"在上面的代码中不起作用？
推荐指数
解决办法
查看次数
嵌套div中的margin-top
我margin-top在嵌套div中有一个问题- 当我应用于margin-top嵌套div时,边距应用于父div 而不是嵌套div.
有任何想法吗？
推荐指数
解决办法
查看次数
为什么保证金底部显示为保证金最高？
我尝试在父级内的div上添加margin-bottom,但它显示为父级的margin-top.为什么？
HTML:
<div id="wrapper">
<div id="content">
<div id="box"></div>
</div>
</div>
CSS:
#wrapper{
border: 1px solid #F68004;
}
#content{
background-color: #0075CF;
height: 100px;
}
#box{
margin-bottom: 50px;
}
我的期望:
我得到了什么:
更新:
我可以解决这个问题,但我不知道为什么代码不起作用？谁能解释一下？
更新2:
看起来大多数回答是因为保证金崩溃而且我的问题与此重复.但请注意,我设置了保证金 -但不是保证金.我还读到了关于利润率下降的问题,我发现没有任何规则可以说利润率可能会成为保证金最高点.有人能指出我吗？
推荐指数
解决办法
查看次数
CSS margin-top无效
http://anonoz.com/armesh//contact_form/
上面的链接显示了我正在制作的联系表格.我试图让它像右边的图片.我必须给出margin-top20px 的文本"今天试试我们" .
HTML:
<body>
<div id="form_container">
<div id="form_body">
**<span class="form_head">Try us Today</span>**
<br/>
<span class="form_subhead">30 day money back gurantee</span>
<form id="enquiry_form" method="post" action="scripts/contact-form-handler.php">
<input type="text" name="name" id="name" value="Name" />
<input type="text" name="contact" id="contact" value="Contact Number" />
<input type="text" name="e-mail" id="email" value="Email" />
<input id='submit_button' type="submit" value="Get Your Space - NOW" />
</form>
</div>
</div>
<img src="form2.jpg"/>
</body>
CSS:
.form_head {
margin-top: 20px;
color:#58585a;
font-size:22px;
}
CSS应该已经将.form_head20px压低了#form_bodydiv.但没有发生任何事 我甚至尝试过Firebug和Chrome开发人员工具,但没有弄清楚为什么会发生这种情况.我也尝试设置#form_bodydiv 的高度以匹配表单的高度,因此.form_head有空间被推下但它仍然无法正常工作.
我已经编码了3个月了,我经常遇到这种类型的问题.我总是通过简单地键入一些定位代码来完成它.
但是,我今天不想做同样的事情,但是想要理解为什么会发生这种情况以及如何以正确的方式解决它.请问有人可以解释一下并教育我吗？
推荐指数
解决办法
查看次数
为什么1px边框取消100px margin-top并杀死滚动条？
这对我来说还没有意义.我错过了什么？
代码在Codepen下面.
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
body {
height: 100vh;
background: pink;
}
.middle {
position: relative;
top: 200px;
/* uncomment the border to kill the scrollbar! */
/* border: 1px solid green; */
}
.middle div {
margin-top: 100px;
border: 1px dashed yellow;
}<div class="middle">
<div>Text</div>
</div>box-sizing: border-box;没有任何区别.添加边框会导致垂直边距不会崩溃,但具体到底是什么？
- 带边框:没有滚动条
- 没有边框,两个顶部边距会崩溃,所以应该需要更少的垂直空间,但我们在全高度上得到一个垂直滚动条
body.
推荐指数
解决办法
查看次数
CSS,使用display:table with before伪元素
我一直在寻找以清除浮动,并找到最好的方法完美的解决方案,如果你看看答案,该解决方案使用display:table,而不是display:block,原因进行了说明:
如果用于包含子元素的顶部边距,则仅使用
table而不是block必需:before.
我尝试理解其含义,我做了一些测试,但我无法弄清楚使用的原因是什么display:table,如果有人可以提供代码示例来显示差异和需要使用display:table.
编辑:
这是一个小提琴,我试着测试差异,我敢肯定有一个,但我无法弄清楚要测试什么.
编辑说明:
我的问题不在于显示之间的区别block/table,我的问题是关于使用display:table和不使用的原因display:block(关于清除浮动),布莱恩从这个答案中得到了解释,但我无法理解其中的原因,如果任何人都可以解释原因,并提供一个代码示例来说明差异.
推荐指数
解决办法
查看次数
位置粘性未正确粘贴
在下面给出的片段中，带有位置粘性的元素不会粘在页面的末尾。
body {
margin: 0;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset …推荐指数
解决办法
查看次数