正如你在这张照片中看到的那样,我在div绿色内部有一个div没有顶部边框的橙色.橙色div有一个30px上边距,但它也推动了绿色div.当然,添加顶部边框将解决问题,但我需要绿色div顶部无边框.我能做什么?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}Run Code Online (Sandbox Code Playgroud)
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>Run Code Online (Sandbox Code Playgroud)
谢谢
我有两个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>
Run Code Online (Sandbox Code Playgroud)
两者都有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;
}
Run Code Online (Sandbox Code Playgroud)
使用填充显然工作,但我想更合适并使用边距.如何设置上边距并将标题下移到容器中而不用移动容器?
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>
Run Code Online (Sandbox Code Playgroud)
因此div#background {position:absolute; 被推倒了.然后我去Firebug,应用背景:红色; 身体和整个区域变红,包括边缘.
1)为什么会发生这种情况,身体距离顶部是50px?
2)如何防止身体被压下?
谢谢 :).
如果我将margin-top放到第一个列表项(LI),那么margin在ul之外.
最后一项和margin-bottom也是一样的.但保证金左/保证金权利按预期运作.
为什么这样,是否可以修复?
请参阅:小提琴链接
干杯
我试图将父div中的子div降低5px.当我把margin-top:5px; 在内部div上,它从父div上方的div下推内部div和父div,但不会将内部div从父div推下.如何设置它以便只将内部div从父div推下5px?我不希望父div从它上面的div下推.谢谢你的帮助.
用于导航的HTML:
<nav>
<div class="nav-container">
<div id="cat_14623_divs">
<ul id="nav_14623">
<li><a href="#" onclick="return false;">AKINA & RED LAKE</a</li>
<li><a href="#" onclick="return false;">FRESH WILD CAUGHT FISH</a>
<ul id="navsub_14623_2326">
<li><a href="#" onclick="return false;">WALLEYE</a></li>
<li><a href="#" onclick="return false;">PERCH</a></li>
<li><a href="#" onclick="return false;">CRAPPIE</a></li>
<li><a href="#" onclick="return false;">NORTHERN</a></li>
<li><a href="#" onclick="return false;">WHITEFISH</a></li>
</ul></li>
<li><a href="#" onclick="return false;">NEWS FROM THE FISHERY</a></li>
<li><a href="#" onclick="return false;">CONTACT US</a></li>
<li class="last"><a href="#" onclick="return false;">FAQs</a></li>
</ul>
</div>
</div>
</nav>
Run Code Online (Sandbox Code Playgroud)
导航CSS:
nav{
position:relative;
width:960px;
background-color:#660000;
height:40px;
}
div.nav-container{
position:relative;
width:100%;
} …Run Code Online (Sandbox Code Playgroud)