I'm having trouble creating space between the profile picture and the text on my page. I've tried adding a bottom margin to the image, but it's not working as expected. Setting display: block didn't make any difference either. Why is this happening?
When I adjust the height and width of the #profile-pic to 100%, or apply margin directly to the #profile-pic, it works fine. However, I'm confused about why it's not working in this particular scenario.
#about {
height: 100%;
width: 100%;
}
#profile-pic {
height: 250px;
width: 250px;
margin: auto;
}
#profile-pic img {
display: block;
height: 100%;
width: 100%;
margin-bottom: 100px;
box-shadow: 0 0 5px 1px rgb(255, 255, 255);
border-radius: 50%;
object-fit: cover;
object-position: 50% 38%;
}<section id="about">
<div id="profile-pic">
<img src="https://data.whicdn.com/images/322027365/original.jpg?t=1541703413" alt="profile pic">
</div>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum autem sequi, est enim, eligendi voluptas et ut aspernatur nostrum laboriosam maxime itaque assumenda sapiente reiciendis, tenetur exercitationem culpa quia ea laudantium! Exercitationem
quo quibusdam, sit quas perspiciatis aspernatur aliquam enim nihil assumenda omnis sunt sequi rerum quisquam. Nesciunt,
</section>