元素之间不需要的边距 - 无法删除
Unwanted Margin Between Element - Unable to Remove
我的 'DIV: IMAGE' 和 'DIV: SLIDER' 之间有一个很大的 'white-space',我无法解释。我看不到我在两个元素之间编写了边距,无论我对样式表做了什么,我都无法删除它。
代码的哪一部分导致了这个?有哪些干净的解决方案?非常感谢。
.wrap {
margin: 0px auto;
width: 80%;
margin-top: 10px;
padding: 3em 0em;
position: relative;
color: #FFF;
}
.image {
background-image: url("http://www.thestrandnyc.com/d/main/media/Destination/__thumbs_1200_700_crop/NY_City.jpg");
background-size: 110% 100%;
padding: 0px 0px 210px 0px;
border: 1px solid red;
}
.slider {
padding: 2em 0em;
background-color: #F4F4F4;
position: relative;
height: 200px;
margin: 0px auto;
border: 1px solid red;
}
.slider p:first-child {
color: #fff;
background: #35AFBA;
font-size: 2.8em;
font-weight: 900;
border-radius: 100%;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 200px;
margin: 0em 0em 0em 1.2em;
position: absolute;
}
.slider p:nth-child(2) {
color: #ff605f;
text-shadow: 0px 0px 2px #ff605f;
background: rgba(230, 231, 231, 0.56);
font-size: 2.8em;
font-weight: 900;
border-radius: 100%;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
line-height: 200px;
margin: 0em 0em 0em 4.5em;
position: absolute;
}
<body>
<div class="image">
<div class="wrap">
<div class="nav">
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
<div class="me">
<h2>Andrew Hardiman</h2>
<p>Webdesigner & Developer</p>
<p>Read More</p>
</div>
</div>
</div>
<div class="wrap">
<div class="slider">
<p>HTML</P>
<p>css</P>
<h3>I design and develop amazing websites that are sleek, easy-to-navigate and exiting to use.</h3>
<p>Work with us to plan your digital marketing mix and achieve better results online.</p>
</div>
</div>
div.slider
在 div.wrap
里面,里面有一个 margin-top
和一个 padding
。它们造成了间隙,移除它们将解决这个问题。
你的 .wrap
元素有 padding
的 3em 和 margin-top
的 10px,尝试删除那 2 css 规则,应该不会再有 white-space.
http://jsfiddle.net/haxj27mm/1/
.wrap {
margin: 0px auto;
width: 80%;
margin-top: 0px;
padding: 0em 0em;
position: relative;
color: #FFF;
}
我的 'DIV: IMAGE' 和 'DIV: SLIDER' 之间有一个很大的 'white-space',我无法解释。我看不到我在两个元素之间编写了边距,无论我对样式表做了什么,我都无法删除它。
代码的哪一部分导致了这个?有哪些干净的解决方案?非常感谢。
.wrap {
margin: 0px auto;
width: 80%;
margin-top: 10px;
padding: 3em 0em;
position: relative;
color: #FFF;
}
.image {
background-image: url("http://www.thestrandnyc.com/d/main/media/Destination/__thumbs_1200_700_crop/NY_City.jpg");
background-size: 110% 100%;
padding: 0px 0px 210px 0px;
border: 1px solid red;
}
.slider {
padding: 2em 0em;
background-color: #F4F4F4;
position: relative;
height: 200px;
margin: 0px auto;
border: 1px solid red;
}
.slider p:first-child {
color: #fff;
background: #35AFBA;
font-size: 2.8em;
font-weight: 900;
border-radius: 100%;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 200px;
margin: 0em 0em 0em 1.2em;
position: absolute;
}
.slider p:nth-child(2) {
color: #ff605f;
text-shadow: 0px 0px 2px #ff605f;
background: rgba(230, 231, 231, 0.56);
font-size: 2.8em;
font-weight: 900;
border-radius: 100%;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
line-height: 200px;
margin: 0em 0em 0em 4.5em;
position: absolute;
}
<body>
<div class="image">
<div class="wrap">
<div class="nav">
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
<div class="me">
<h2>Andrew Hardiman</h2>
<p>Webdesigner & Developer</p>
<p>Read More</p>
</div>
</div>
</div>
<div class="wrap">
<div class="slider">
<p>HTML</P>
<p>css</P>
<h3>I design and develop amazing websites that are sleek, easy-to-navigate and exiting to use.</h3>
<p>Work with us to plan your digital marketing mix and achieve better results online.</p>
</div>
</div>
div.slider
在 div.wrap
里面,里面有一个 margin-top
和一个 padding
。它们造成了间隙,移除它们将解决这个问题。
你的 .wrap
元素有 padding
的 3em 和 margin-top
的 10px,尝试删除那 2 css 规则,应该不会再有 white-space.
http://jsfiddle.net/haxj27mm/1/
.wrap {
margin: 0px auto;
width: 80%;
margin-top: 0px;
padding: 0em 0em;
position: relative;
color: #FFF;
}