如何解决图片和标题之间不需要的空间
图像(有边框)和下面的分隔线之间有一些空间。图片的ID为varImg,并且它与#div2之间存在空格。我在图像和分割上都设置了边距和填充,但是没有用。我真的很感谢一个答案。
这是我的代码:
#first {
background-image: url('themaogate.jpg');
background-repeat: no-repeat;
background-size: 105%;
margin: 0px 0px 0px 0px;
display: block;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
}
div {
margin: 0;
padding: 0;
}
#div1 {
background-color: white;
margin: 0;
padding: 0;
}
#varImg {
display: block;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: black;
border-width: 0 1.5in .5in 1.5in;
margin: 0;
padding: 0;
}
jpg {
line-height: 0px;
height: 100%;
}
#div1 {
background-color: black;
}
#div2 {
text-align: right;
margin: 0;
}
<div id="div1">
<nav id="nav2" class="centeralign">
<ul id="ul1">
<p>We offer a variety of services including:</p>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Soccer</button></li>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Tennis</button></li>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Table Tennis</button></li>
<li><button onclick="document.getElementById('varImg').src='#'">Tabata,Aerobics,Zumba,Workouts and Dance</button></li>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Events and Team building</button></li>
</ul>
</nav>
<img id="varImg" src="">
</div>
<div id="div2">
<h1>Welcome to The #!</h1>
<img id="img1" src="#.jpg">
<p>###</p>
</div>
解决方法
您h1
内的#div2
仍然有较高的利润。将其设置为零应该可以解决该问题:
#div2 h1 {
margin-top: 0;
}
#first {
background-image: url('themaogate.jpg');
background-repeat: no-repeat;
background-size: 105%;
margin: 0px 0px 0px 0px;
display: block;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
}
div {
margin: 0;
padding: 0;
}
#div1 {
background-color: white;
margin: 0;
padding: 0;
}
#varImg {
display: block;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: black;
border-width: 0 1.5in .5in 1.5in;
margin: 0;
padding: 0;
}
jpg {
line-height: 0px;
height: 100%;
}
#div1 {
background-color: black;
}
#div2 {
text-align: right;
margin: 0;
}
<div id="div1">
<nav id="nav2" class="centerAlign">
<ul id="ul1">
<p>We offer a variety of services including:</p>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Soccer</button></li>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Tennis</button></li>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Table Tennis</button></li>
<li><button onclick="document.getElementById('varImg').src='#'">Tabata,Aerobics,Zumba,Workouts and Dance</button></li>
<li><button onclick="document.getElementById('varImg').src='#.jpg'">Events and Team building</button></li>
</ul>
</nav>
<img id="varImg" src="">
</div>
<div id="div2">
<h1>Welcome to The #!</h1>
<img id="img1" src="#.jpg">
<p>###</p>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。