css - 块元素之间有小小的间隙
本文介绍了css - 块元素之间有小小的间隙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
图片和下面的main元素之间有一点空白的地方，不能紧密的连在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vps-mart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<section class="header-top">
<a class="logo" href="#">
<img src="imgs/Logo.gif">
</a>
<section class="header-top-right">
<ul>
<li>
<a href="#">
<img src="imgs/open-ticket.gif">
</a>
</li>
<li>
<a href="#">
<img src="imgs/billing-system.gif">
</a>
</li>
<li>
<a href="#">
<img src="imgs/control-panel.gif">
</a>
</li>
</ul>
<a href="#" class="online-chat">
<img src="imgs/online-chat.gif">
</a>
</section>
</section>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Windows VPS</a>
</li>
<li>
<a href="#">Linux VPS</a>
</li>
<li>
<a href="#">Dedicated</a>
</li>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Network</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</header>
<section class="banner-wrap">
<img src="imgs/vps_mart_banner_01.gif">
</section>
<main class="content">
<section class="windows-product">
<section class="window express">
<h3>Express Windows VPS</h3>
<ul>
<li>
2GB Memory
</li>
<li>
40GB SSD Diskspace
</li>
<li>
1 CPU Core
</li>
<li>
10 Mbps Unmetered Bandwidth
</li>
<li>
1 Dedicated IP
</li>
<li>
RDP Administrator Access
</li>
<li>
Windows Server 2012 R2/2008 R2
</li>
<li>
Super Fast SSD Space
</li>
<li>
$7.99/month
</li>
</ul>
</section>
<section class="window basic">
<h3>Basic Windows VPS</h3>
<ul>
<li>
2GB Memory
</li>
<li>
40GB SSD Diskspace
</li>
<li>
1 CPU Core
</li>
<li>
10 Mbps Unmetered Bandwidth
</li>
<li>
1 Dedicated IP
</li>
<li>
RDP Administrator Access
</li>
<li>
Windows Server 2012 R2/2008 R2
</li>
<li>
Super Fast SSD Space
</li>
<li>
$7.99/month
</li>
</ul>
</section>
<section class="window advanced">
<h3>advanced Windows VPS</h3>
<ul>
<li>
2GB Memory
</li>
<li>
40GB SSD Diskspace
</li>
<li>
1 CPU Core
</li>
<li>
10 Mbps Unmetered Bandwidth
</li>
<li>
1 Dedicated IP
</li>
<li>
RDP Administrator Access
</li>
<li>
Windows Server 2012 R2/2008 R2
</li>
<li>
Super Fast SSD Space
</li>
<li>
$7.99/month
</li>
</ul>
</section>
</section>
<section class="linux-product">
</section>
<section class="advantage">
</section>
</main>
</body>
</html>
html{
width: 100%;
height: 100%;
font-size: 62.5%;
}
html,body,section,figure,header,nav,a,ul,li,img{
margin: 0;
padding: 0;
}
body{
padding: 0 15%;
background-color: #eee;
display: flex;
flex-direction: column;
}
a{
display: block;
text-decoration: none;
}
li{
list-style: none;
}
/**
*
* header style
*
*/
header{
width: 100%;
background-color: #c2c2c2;
}
.header-top{
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.header-top-right{
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}
.header-top-right>ul{
display: flex;
flex-direction: row;
}
/* nav style */
header>nav>ul{
width: 100%;
height: 43px;
border-top: 1px solid #656565;
line-height: 43px;
background-color: #4a4a4a;
display: flex;
flex-direction: row;
justify-content: space-around;
}
header>nav li{
width: 100%;
height: 43px;
line-height: 43px;
text-align: center;
}
header>nav li:hover{
background-color: #6e6e6e;
}
header>nav a {
height: 43px;
line-height: 43px;
font-size: 2rem;
color: #ff721b;
white-space: nowrap;
}
/**
*
*banner style
*
*/
.banner-wrap{
width: 100%;
height: 100%;
border-top: 1px solid #656565;
}
.banner-wrap img{
width: 100%;
}
/**
*
*content style
*
*/
.content{
background-color: #fff;
/*padding-top: 85px;*/
}
/* windows produce styles*/
h3{
font-size: 2rem;
color: #290000;
width: 100%;
background-color: #bbbebe;
}
.windows-product{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.windows-product>section{
width: 33.3%;
}
解决方案
父元素font-size:0px
移除元素代码之间的空白
父元素letter-spacing设置负数
这篇关于css - 块元素之间有小小的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
