Question

我正在使用HTML和CSS构建示例网页。我也在使用Bootstrap。我注意到在链接Bootstrap CSS之前和链接Bootstrap CSS之后页面输出有所不同以下是我的代码和输出：

添加Bootstrap之前

添加Bootstrap 后在添加Bootstrap之前，菜单栏似乎已经出现了边距，但是在添加Bootstrap后，菜单栏会清晰地粘贴到边距。为什么会这样？ Bootstrap中的哪些属性会发生这种变化？

以下是我的代码：
index.html：

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Server App</title>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<div id='top-bar' class="menu">
    <div id="logo">
    <img src="images/logo.png" width="220px" />
    </div>
    <ul>
    <li class="pill active">Home</li>
    <li class="pill">About Us</li>
    <li class="pill">Photos</li>
    </ul>
</div>
<div id = "content">
</div>
</body>
</html>

style.css：

body{
    background-color:#C6C4C4;
}
#top-bar{
    position:relative;
    background-color:#6A5293;
    padding:0px 0px 0px 0px;
    height:50px;
    margin:0px 0px 0px 0px;
    width:100%;
    display:block;
}
.menu ul{
    list-style-type:none;
    margin:0;
    padding:0;
    float:right;
}
.menu li{
    float:left;
}
.pill{
    display:flex !important;
    width: 120px;
    height:50px;
    font-weight: bold;
    color: #FFFFFF;
    background-color:#6A5290;
    justify-content:center;
    align-items:center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}
.pill:hover{
    background-color:#5d3f91;
}
.active{
    background-color:#5d3f91;
}
#logo{
    float:left;
}
#content{
    height:800px;
    width:70%;
    margin-right:auto;
    margin-left:auto;
    background-color:#fff!important;
    margin-top:10px;
    margin-bottom:10px;
}

Answer 1

Bootstrap中的CSS重置将边距设置为0。

div HTML CSS周围的额外空格

1 个答案: