Space between HTML tags

Question

Space between HTML tags

Navigation

#1 by (1 votes)

0

I'm a beginner in development with HTML and CSS, and I'm having a hard time understanding why html tags are a space. As in the following example where I have a header, a div and a footer with different colors for easy visualization, and between them is always a white line. In such cases would I have to work with negative margin to fix this?

body{
margin: 0;
}

header {
background-color: #333333;
color: white;
}

div {
background-color: red;		
}
		
footer {
background-color: #000000;
color: white;
}

<header class="top-header">
<h1>Header</h1>	
</header>
	
<div class="top-content">
<h1>Main Content</h1>
</div>
	
<footer>
<h1>Teste</h1>
</footer>

html css

asked by anonymous 24.07.2018 / 02:31

1 answer

How to create a Trigger in MySQL with more than one cursor Get date of the next 12 months with php

score 1 · Accepted Answer

It's like Valdeir said in the comment. Several HTML elements have CSS defauld values that can even vary from Browser to Browser, so elements like radio buttons, input, and selects differ between FireFox, Safari or Chrome.

If you are interested here you have a complete list of all HTML elements and their default link

In the case of H1 in Chreme, for example, user-agent (default browser style) places the following values in the element

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

If you inspect H1 you will see that it looks like this. The orange color is the margin that the element has by default

Applicationexample

IfyoutakethebordersofH1youwillseethatdivsstickasyouwant.

body{
margin: 0;
}

header {
background-color: #333333;
color: white;
}

div {
background-color: red;		
}
        
footer {
background-color: #000000;
color: white;
}
/* romeve as margens do h1*/
h1 {
    margin: 0;
}

<header class="top-header">
  <h1>Header</h1>	
</header>
    
<div class="top-content">
  <h1>Main Content</h1>
</div>
    
<footer>
  <h1>Teste</h1>
</footer>

TIP: Take a quick test, get the above code and where% is <h1> put <p> and see whitespace will return. This happens because, like h1 , the p tag also has default margins