How do I remove/change the padding from "display: flex;"

Question

Between "user" and "comment" there is a padding that I didn't specify, and which I presume comes from the "display: flex;". I want to remove or change the size of the padding, but I can't seem to figure out how. Here is the code:

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.controls, .commentcontent {
    display: flex;
    flex-direction: column;
}
.controls {
    align-items: center;
}

.commentcontent {
    width: 100%;
}

.upvote, .downvote, .votes {
    width: 10px;
    height: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.votecount {
    font-size: 12px;
    font-weight: bold;
    width: 30px;
}
.upvote:hover, .downvote:hover {
    background-color: rgba(200, 200, 200, 1);
}
.upvote:active, .downvote:active {
    background-color: rgba(150, 150, 150, 1);
}

.noselect {
    user-select: none;
}

.comment {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.33);
    border-radius: 10px;
    overflow: hidden;
    margin: 5px 0;
    width: 50%;
    min-height: 150px;
}

.commentbody {
    padding: 0 10px;
}

.commentbody pre {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.commentinfo {
    font-size: 12px;
    color: grey;
    padding: 5px 10px;
}

.author a {
    text-decoration: none;
    color: grey;
}

<div class="comment">
    <div class="controls">
        <div class="upvote noselect">&#8593;</div>
        <div class="votes">1</div>
        <div class="downvote noselect">&#8595;</div>
    </div>
    <div class="commentcontent">
        <div class="commentinfo">
            <div>
                <span class="author">user</span>
            </div>
        </div>
        <div class="commentbody">
            <pre id="commentarea">Comment</pre>
        </div>
    </div>
</div>

I tried changing the "align-items" and "justify-content" to "flex-start" but that won't solve the issue. I have also tried setting the padding and margin to 0 in the body selector but that didn't work too. How do I remove/change this padding?

Answer 1

The gap between User and Comment is not from any padding related to display flex, but the pre tag used has a default margin of 1em defined by browser.

Check the screenshot below for reference: