Question

当我以完整尺寸查看我的网页时，它将显示为左图像。当我缩小窗口时，它将显示为右图像

@charset "utf-8";

/* CSS Document */
*{
	margin: 0;
	padding: 0;
	max-height: 1200px;
}
body {
    max-height: 1200px;
	overflow-y: hidden;
	color: rgba(88,88,88,0.92);
}
#bgimg{
	width: 40%;
	margin: 0;
	padding: 0;
	max-width: 864px;
}
.bgimg{
	background: url(sideimage_4.png) no-repeat  center ;
	background-size: cover;
	height: 1100px;
	margin: 0;
	
}
.goleft{
	float: left;
}
#sideright{
	width: 60%;
	float: right;
	background-color:white;
	height: 1100px;
	overflow: scroll;
	overflow-x: hidden;
	margin-left: auto;
}
#intro{
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: white;
}
#introinner{
	text-align: center;
	padding: 10% 10px;
}
#introinner h1{
	font-family: 'Sofia';
	font-size: 500%;
	font-weight: 800;
}
#introinner p{
	margin: 8px;
	font-family: 'Sofia';
	
}
#introinner a i{
	font-size: 80%;
	color: rgba(88,88,88,0.92);
}
#banner{
	width: 100%;
	margin: 0;
	padding: 0;
}
#banner img{
	width: 100%;
}
#cf {
    position:relative;
    width:100%;
	margin:0 auto;
}

#cf img {
	width: 100%;
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
    opacity:0;
}
#selfintro{
	margin-top: 500px;
	clear: top;
	
}

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/homecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">
</head>

<body>
	<nav id="bgimg" class="goleft">
		<div class="bgimg"></div>
	</nav>
	<section id="sideright" class="goleft">
		<section id="intro">
			<div id="introinner">
				<h1>Troy Wu</h1>
				<p>The King in the South</p>
				<a href="http://via.placeholder.com/350x150" download="meizi" target="_blank"><i class="fa fa-download">DownLoad My Pic</i></a>
			</div>
		</section>
		<section id="banner">
			<img src="http://via.placeholder.com/350x150">
		</section>
		<div id="cf">
			<img class="bottom" src="http://via.placeholder.com/350x150">
			<img class="top" src="http://via.placeholder.com/450x150">
		</div>
		<div id="selfintro"><img src="http://via.placeholder.com/350x150"></div>
		<p>asdfasdf asd</p>
		
	</section>

</body>
</html>

我发布了这两个部分的代码。我很确定问题发生在div（cf），因为位置：相对和绝对。我试图在css上加上一个margin-top，但它不起作用。我一直试图解决这个问题两天，但仍然不知道这一点。你能帮我解决这个问题吗？如何避免这两个部分之间的空间？

Answer 1

问题通常是因为元素是内联块元素而不是块元素，并且因为内联块元素尊重标记中的空白，所以元素之间会出现这些间隙。

您可以将font-size缩小为零，并且因为空间取决于字体大小，可以解决问题，或者您可以删除标记中的所有空格（这会导致HTML混乱），或者您如果不破坏您的布局，可以使违规元素阻止项目而不是内联块项目。

由于我在布局上没有看到任何文字，我会将字体大小设置为零并查看是否解决了这个问题，然后在需要添加标签的情况下，在包含文本的跨度或div上专门设置字体大小标题等。

如何避免两个部分之间的空间

1 个答案: