Bootstrap div border taking spaces

enter image description here


I'm using bootstrap 4 and making my own project. After some time I found a problem which I can't fix. I have placed an image into a div section and made the div to be 200px of height & width and overflow will be hidden. Then I made the height of the image 100% of the div and gave a background color(bg-light) and border(5px solid black) to the div. But the background color is seen 1px left, top and right of the div and the image is placed after the 1 px left, right and top.


<div class="profile-image-container">
    <img class="profile-image" src="image.jpg" />


    width: 200px;
    height: 200px;
    border: 5px solid black;
    overflow: hidden;

    height: 100%;

Read more here:

Content Attribution

This content was originally published by Sumon Kaysar at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: