Hello, I have an unwanted horizontal margin between two Divs, I would like to know where the error is

Question

function typeWriter(elemento){

const textoArray = elemento.innerHTML.split('');
elemento.innerHTML = '';
textoArray.forEach((letra, i) => {
   setTimeout(() => elemento.innerHTML += letra, 75 * i);
});
}

const titulo = document.querySelector('.TxtDigi');
typeWriter(titulo);

#parallax {
    /* a imagem usada */
    background-color: blue;

    /* Set a specific height */
    min-height: 650px; 

    /* Create the parallax scrolling effect 
	filter: brightness(49%);*/
		
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.TxtDigi{
max-width:70%;
text-align: center;
font-family: 'Courier new', courier, monospace;
font-size:3em;
color: white;
position: relative;
top: 6em;
left: 14%;
}
.TxtDigi::after{
content: '|';
opacity: 1;
animation: pisca .7s infinite;
}
@keyframes pisca {
0%, 100%{
opacity: 1;
 }
50%{
opacity:0;
 }

}

#Historia{

background-color: #104E8B;
height: 30em;


}

<div id="parallax">
  
  <p class="TxtDigi">“Ligados um ao outro com a mesma ideia e Programando um roteiro para sua empresa”.</p>
    
</div>

<div class="Historia" style="height:1000px;background-color:red;font-size:36px">

</div>

bold text

---

ah, and detail when I lower the screen the margin goes away:

Answer 1

This is because the element <P> has a native margin, this margin leaks out of the <div>, This is called margin collapse

In accordance with W3 Collapsing Margins:

The adjacent margins of two or more boxes (which may or may not be siblings) can combine to form a single margin. Refers to this type of margins that combine in this way as "collapse" and the resulting combined margin is called "collapse margin".

This is also explained https://www.w3.org/TR/CSS2/visuren.html#block-formatting:

Elements with float, Absolute and elements with inline-block, table-Cell, and table-captions for example are not really block boxes and block boxes with overflow other than overflow: Visibile generate a new block for content formatting.

In the context of a block of content formatting, the "boxes" are placed vertically out one after the other, starting from the top of the contents of a block. The vertical distance between the boxes is determined by the margin property, the vertical margins between the level of the blocks are adjacent in the context formatting causing the collapse.

When there is no collapse (mixing of the margins):

• Horizontal margins.
• Elements with overflow that is different from Visible, such as Hidden and auto
• Elements with float: left; or float: right;
• Elements with position other than Static

As I explained in this reply:

• Margins of the child element leaking to the parent element

---

the ways to resolve are:

overflow + dynamic height:

Here we apply an overflow:Hidden to paralax, so the "p" margin is limited to overflow.

function typeWriter(elemento){

const textoArray = elemento.innerHTML.split('');
elemento.innerHTML = '';
textoArray.forEach((letra, i) => {
   setTimeout(() => elemento.innerHTML += letra, 75 * i);
});
}

const titulo = document.querySelector('.TxtDigi');
typeWriter(titulo);

#parallax {
    overflow: hidden;

    /* a imagem usada */
    background-color: blue;

    /* Set a specific height */
    min-height: 650px; 

    /* Create the parallax scrolling effect 
	filter: brightness(49%);*/
		
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.TxtDigi{
max-width:70%;
text-align: center;
font-family: 'Courier new', courier, monospace;
font-size:3em;
color: white;
position: relative;
top: 6em;
left: 14%;
}
.TxtDigi::after{
content: '|';
opacity: 1;
animation: pisca .7s infinite;
}
@keyframes pisca {
0%, 100%{
opacity: 1;
 }
50%{
opacity:0;
 }

}

#Historia{

background-color: #104E8B;
height: 30em;


}

<div id="parallax">
  
  <p class="TxtDigi">“Ligados um ao outro com a mesma ideia e Programando um roteiro para sua empresa”.</p>
    
</div>

<div class="Historia" style="height:1000px;background-color:red;font-size:36px">

</div>

Applying padding

The other solution is to use a 1px padding on top and another one below, example:

function typeWriter(elemento){

const textoArray = elemento.innerHTML.split('');
elemento.innerHTML = '';
textoArray.forEach((letra, i) => {
   setTimeout(() => elemento.innerHTML += letra, 75 * i);
});
}

const titulo = document.querySelector('.TxtDigi');
typeWriter(titulo);

#parallax {
    padding-top: 1px;
    padding-bottom: 1px;

    /* a imagem usada */
    background-color: blue;

    /* Set a specific height */
    min-height: 650px; 

    /* Create the parallax scrolling effect 
	filter: brightness(49%);*/
		
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.TxtDigi{
max-width:70%;
text-align: center;
font-family: 'Courier new', courier, monospace;
font-size:3em;
color: white;
position: relative;
top: 6em;
left: 14%;
}
.TxtDigi::after{
content: '|';
opacity: 1;
animation: pisca .7s infinite;
}
@keyframes pisca {
0%, 100%{
opacity: 1;
 }
50%{
opacity:0;
 }

}

#Historia{

background-color: #104E8B;
height: 30em;


}

<div id="parallax">
  
  <p class="TxtDigi">“Ligados um ao outro com a mesma ideia e Programando um roteiro para sua empresa”.</p>
    
</div>

<div class="Historia" style="height:1000px;background-color:red;font-size:36px">

</div>

You can change:

padding-top: 1px;
padding-bottom: 1px;

For

padding: 1px 0;

Which is equivalent, but depends on whether you don’t want to control padding-left and padding-right

Answer 2

The standard values of p{[...]} are affecting in the margin.

Reset this class in your css:

.TxtDigi {
    max-width: 70%;
    text-align: center;
    font-family: 'Courier new', courier, monospace;
    font-size: 3em;
    color: white;
    position: relative;
    top: 6em;
    left: 14%;

    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

When you have problems like this you can check in inspect element; usually below your css markup is the default values. There are even some codes that I use to reset the default values, a good example is before writing my css code put:

html,body{
    margin: 0px;
    padding: 0px;
}