This occurs because the element <P> has a margin natively, that margin leaks out of <div> , this is called margin collapse
As W3 Collapsing Margins :
Adjacent margins of two or more boxes (which may or may not be siblings) can combine to form a single margin. It refers to this type of margins that combine in this way like "collapse" and the resulting combined margin is called "margin of collapse".
This is also explained link :
Elements with float, absolute and elements with inline-block, table-cell, and table-captions for example are not actually block boxes and block boxes with overflow other than overflow: visibile generate a new block for formatting the content .
In the context of a content format block, 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 of the context causing the collapse.
When collapse does not occur (merging of margins):
- Horizontal margins.
- Overflow elements that are different from visible, such as hidden and auto
- Float elements: left; or float: right;
- Elements with a position other than static
As I explained in this answer:
The ways to solve are:
overflow + dynamic height:
Here we apply an overflow: hidden in paralax, so the margin of "p" 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 padding of 1px above and below, for 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 trade:
padding-top: 1px;
padding-bottom: 1px;
By
padding: 1px 0;
That's equivalent, but it depends if you do not want to control padding-left and padding-right
