CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vishal Subramanyam
Vishal Subramanyam

Reputation: 531

Extra whitespace around div HTML CSS

I am building up a sample webpage using HTML and CSS. I am also using Bootstrap. I noticed a difference in the output of the page before linking Bootstrap CSS and after linking Bootstrap CSS.
Below is my code and output:

Before adding Bootstrap enter image description here

After adding Bootstrap
enter image description here Before adding Bootstrap, the menu bar seems to come out of the margins, but after adding Bootstrap, the menu bar sticks to the margins clearly. Why is this happening? What property in Bootstrap makes this change happen?

Below is my code:
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;
}

Upvotes: 0

Views: 129

Answers (1)

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

There's a CSS reset in Bootstrap that sets margins to 0.

Upvotes: 2

Related Questions