Bootstrap div border taking spaces

enter image description here

Hi!

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.

HTML:

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

CSS:

.profile-image-container{
    width: 200px;
    height: 200px;
    border: 5px solid black;
    overflow: hidden;
}

.profile-image{
    height: 100%;
}


Read more here: https://stackoverflow.com/questions/66136383/bootstrap-div-border-taking-spaces

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: