I've written a code to place two images side by side and show some text on hover, but I came across a weird behavior I can't explain and I was wondering if anyone can explain it to me. Everything works fine with the code, but as soon as I add borders to the .project-tile class, to add borders around the image, both images collapse to the center. I have tried to isolate the problem but I can't really figure it out, anyone has any idea? codepen: https://codepen.io/pafestivo/pen/JjvNMmJ?editors=1100

CodePudding user response：

This has to do with the css box-sizing property. By default, the value of box-sizing is content-box, which means the border is not constrained by the width: 400px; and instead causes the divs to overflow their width and trigger wrapping.

Setting box-sizing: border-box; on .project-tile will allow you to add borders while keeping the current positioning.