How to solve the element movement caused by hover-generated border

Preface

Sometimes when hover pseudo-class adds a border to an element, the content in the element shifts. Although we set box-sizing: border-box and specify the width and height of the element, the content is still squeezed by the border. For example, in the following situation:

<style type="text/css" media="screen">
    .test {
        height: 30vmin;
        width: 30vmin;
        background: lightblue;
        box-sizing: border-box;
    }
    .test:hover {
        border: 5px solid black;
    }
</style>
<div class="test">
    this is a div.
</div> 

The reason here is obvious. The size of our element has not changed (if the element width and height are not set or box-sizing: border-box is used, the element size will change). box-sizing: border-box is effective, but the content in the element has been squeezed out because of the suddenly added border. Our box model is margin , border , padding , and content from outside to inside, so the newly added border will inevitably compress content smaller, and the boundary coordinates of content will also change, which will cause the visual content to move. So the solution to the problem is to make sure that the addition of the border does not affect the position of content .

Adding a border to an element

The sudden appearance of the border changes the original layout and moves the content. In this case, we can just let the border exist in the previous layout.

.test {
    height: 30vmin;
    width: 30vmin;
    background: lightblue;
    border: 5px solid transparent;
    box-sizing: border-box;
}
.test:hover {
    border: 5px solid black;
}

Using box-shadow

Using box-shadow or outline that does not take up box model space is also an option.

.test:hover {
    /* border: 5px solid black; */
    box-shadow: 0 0 0 5px black;
    outline: 5px solid black;
}

Use padding

We can reserve space for border by changing padding size.

.test {
    height: 30vmin;
    width: 30vmin;
    background: lightblue;
    box-sizing: border-box;
    padding: 5px;
}
.test:hover {
    padding: 0;
    border: 5px solid black;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.