After set css display:none affect layout

Question

This is the sample HTML generated from my javascript. Just wondering how come setting display:none; will affect the UI? Below is the code snippet

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .card {
            display: inline-block;
            text-align: center;
            margin: 5px;
            padding: 10px;
            width: 70px;
            height: 100px;
            font-size: 26px;
            background-color: black;
            border: solid 1px black;
            color: white;
            border-radius: 10px;
        }

        .holeCard {
            /*visibility: hidden;*/
            border: solid 1px black;
            background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
        }
    </style>
</head>
<body>
    <div class="card red">
        <span class="dealerCardFace">2</span>
        <span class="dealerCardSuit">♦</span>
    </div>
    <div class="card red holeCard">
        <span class="dealerCardFace">7</span>
        <span class="dealerCardSuit">♦</span>
    </div>

</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    //$('.holeCard').eq(1).hide();
    $(".holeCard > :nth-child(1)").hide();
    $(".holeCard > :nth-child(2)").hide();
</script>

If I remove the display:none, it will look like below which is what I want.

If you use `float: left` to `.card` instead of `display: inline-block` it will slove that misalign issue. — Santosh, May 01 '19 at 06:38
When you use "display: inline-block;" you should define " vertical-align:top/middle/bottom" to keep consistence. — Hanif, May 01 '19 at 06:53
Thanks @Hanif I was wondering why that div is misaligned. Thank for your comment. it made me clear now. — Santosh, May 01 '19 at 07:21
please don't use float to fix this issue, keep inline-block and adjust the vertical alignment (check the duplicate for more details) — Temani Afif, May 01 '19 at 10:30

score 0 · Accepted Answer · answered May 01 '19 at 06:47

It maybe due to the block has to share same component inside it too. But in your case you should use float: left instead of inline-block

    $(".holeCard > :nth-child(1)").hide();
    $(".holeCard > :nth-child(2)").hide();

        .card {
            float: left;
            text-align: center;
            margin: 5px;
            padding: 10px;
            width: 70px;
            height: 100px;
            font-size: 26px;
            background-color: black;
            border: solid 1px black;
            color: white;
            border-radius: 10px;
        }

        .holeCard {
            /*visibility: hidden;*/
            border: solid 1px black;
            background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card red">
        <span class="dealerCardFace">2</span>
        <span class="dealerCardSuit">♦</span>
    </div>
    <div class="card red holeCard">
        <span class="dealerCardFace">7</span>
        <span class="dealerCardSuit">♦</span>
    </div>

After set css display:none affect layout

1 Answers1