Flexbox remove the column gap between two children-CodePudding

This is the code:

.content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: stretch;
}

<div >
    <h4>type</h4>
    <h4>exp</h4>
</div>

This is what it looks like:

______________________

        type


        exp

______________________

How do I shrink the gap between the 2 elements? I tried css gap: 10px; and column-gap: 20px;, it does not work.

CodePudding user response：

The spacing between the h4 elements is because by default, h4 has a margin around it. You can just add margin: 0 to h4 to prevent this:

.content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: stretch;
}

.content h4 {
    margin: 0;
}

<div >
    <h4>type</h4>
    <h4>exp</h4>
</div>

CodePudding user response：

The h4-tag has some margin by default. Try to add

h4 {
  margin: 0;
}

to your CSS.