Question

因此，我通常是Web设计和编码的新手。我正在尝试创建一个简单的社交网络。我仍处于设计阶段，目前有一个非常烦人的问题。如果您查看我发布的屏幕截图，则选择了一个名为“ sideBar”的div。如果将鼠标悬停在其上方，则会在右侧显示一个橙色框，表示我有一个边距。但是，如果您查看我的代码，则确保该元素以及所有子元素没有空白。即使是chrome也不实际计算，因为它不能告诉我它的大小。它只是突出显示它。我到底该如何删除此保证金？我将链接我的代码和屏幕截图。

body {
	background-color: black;
}

#Introduction {
	color: white;
	text-align: center;
}

#sideBar {
	text-align: left;
}

h5 {
	color: rgb(209, 86, 33);
}

h3 {
	color: rgb(33, 171, 209);
}

.postContent{
	text-align: right;
	color: rgb(209, 174, 33);
}

#mainPage {
	text-align: right;
	width: 774px;
	float: right;
}

#sideBar *{
	width: 550px;
	margin-right: 0px;
}

#sideBar {
	width: 550px;
	margin-right: 0px;
	
}

<!DOCTYPE html>
<html>

<head>
	<title>TimelineSocial</title>]
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<div id='wrapper'>
		<div id='Introduction'>
			<h1>Welcome to Alabas Social!</h1>
			<h2>Here is your dashboard!</h2>
		</div>
		<div id='sideBar'>
			<div id='username'>
				<div id='signedInAs'>
					<h3>Username</h3>
					<h5>Saker Alabas</h5> 
				</div>
			</div>
			<div id='peopleYouMightKnow'>
				<div id='pplUmiteNo'>
					<h3>People You might know</h3>
					<h5>Dude Number 1</h5>
					<h5>Dude Number 2</h5>
					<h5>Dude Number 3</h5>
					<h5>Dude Number 4</h5>
				</div>
			</div>
			<div id='yourFollowers'>
				<div id='urFllwers'>
					<h3>Your Followers</h3>
					<h5>Dude Number 1</h5>
					<h5>Dude Number 2</h5>
					<h5>Dude Number 3</h5>
					<h5>Dude Number 4</h5>
				</div>
			</div>
			<div id='peopleYouFollow'>
				<div id='urFllwing'>
					<h3>People you follow</h3>
					<h5>Dude Number 1</h5>
					<h5>Dude Number 2</h5>
					<h5>Dude Number 3</h5>
					<h5>Dude Number 4</h5>
				</div>
			</div>
		</div>
		<div id='mainPage'>
			<div id='postFeed'>
				<h2>Posts</h2>
				<div class='post'>
					<div class='postContent'>
						<p>Wassup Fams</p>
					</div>
					<div class='postAuthor'>
						<h6>GuyDude</h6>
					</div>
					<div class='followAuthorPrompt'>
						<a><h6>Follow</h6></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

Here is a screenshot of the google chrome preview

Answer 1

div元素在默认情况下为display: block;，这就是为什么您看到“幽灵”边距的原因。

设置

#sideBar {
  display: inline-block;
}

应该解决这个问题。

您可以在此处了解更多信息：https://www.w3schools.com/css/css_display_visibility.asp

Chrome上显示的不可见边距

1 个答案: