所以我对网页设计和编码总体来说是新手。我正在尝试创建一个简单的社交网络。我仍处于设计阶段，目前遇到一个非常烦人的问题。如果您查看我发布的屏幕截图，您会发现我选择了一个名为“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>
最佳答案
div 元素默认为 display: block;，这就是您看到“幽灵”边距的原因。
设置
#sideBar {
display: inline-block;
}
应该解决这个问题。
您可以在这里阅读更多信息:https://www.w3schools.com/css/css_display_visibility.asp
关于html - Chrome 上显示不可见边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52946821/