Why even when margin and padding ta set to 0px there are still spaces between the elements?

Asked

Viewed 66 times

1

#header{
  margin: 0px;
  padding: 0px;
  border: 0px;
  width:100%;
  height:100px;
  background-color:#00F;
}
  
#conteudo{
  widows: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px;
  height:500px;
  background-color:#0F0;
}

#footer{
  widows: 100%;
  padding: 0px;
  border: 0px;
  margin: 0px;
  height:100px;
  background-color:#C3C;
}

#Conteudo-Top{
  widows: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px;
  height:250px;
  background-color:red;
}

 #Conteudo-Down{
  margin: 0px;
  padding: 0px;
  border: 0px;
  widows: 100%;
  height:250px;
  background-color:blueviolet;
 }
<div id="site">
  <div id="header"><h1>Header</h1></div>
  <div id="conteudo">
  <div id="Conteudo-Top"><h1>Conteudo TOP</h1></div>
  <div id="Conteudo-Down"><h1>Conteudo Down</h1></div>
  <div id="footer"><h1>Footer</h1></div>
</div>

Borda mesmo com margin 0px

html css

  • Why - I believe it has something to do with the font size of the document. Use the universal selector by applying font-size:0; the spaces will disappear

1 answer

0


In the CSS, using the asterisk *, better known as universal selector, you can apply the padding and the margin generally in your HTML document. So, using as follows:

* {
  margin: 0;
  padding: 0;
}

will be applying to all elements, leaving no spaces between them. It is important to remove the padding and margin of the other elements that are not overwritten, or if a different effect is necessary, there could override the elements (give more space in a specific element, for example).

* {
  margin: 0;
  padding: 0;
}

#header {
  border: 0px;
  width:100%;
  height:100px;
  background-color:#00F;
}
  
#conteudo {
  widows: 100%;
  border: 0px;
  height:500px;
  background-color:#0F0;
}

#footer {
  widows: 100%;
  border: 0px;
  height:100px;
  background-color:#C3C;
}

#Conteudo-Top{
  widows: 100%;
  border: 0px;
  height:250px;
  background-color:red;
}

 #Conteudo-Down {
  border: 0px;
  widows: 100%;
  height:250px;
  background-color:blueviolet;
 }
<div id="site">
  <div id="header"><h1>Header</h1></div>
  <div id="conteudo">
  <div id="Conteudo-Top"><h1>Conteudo TOP</h1></div>
  <div id="Conteudo-Down"><h1>Conteudo Down</h1></div>
  <div id="footer"><h1>Footer</h1></div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.