'How to override elements with css

I'm trying to CSS put a yellow square below an image, as shown in the picture below, but I can't. Does anyone have any suggestions on how I can make this effect?

enter image description here

HTML:

<div class="photo-container">
     <picture class="photo-perfil">
           <img src="assets/photo-perfil.jpg" alt="photo">
     </picture>
</div>

CSS:

.photo-perfil {
    display: block;
    margin: 30px;
    border: 2px solid yellow;   
}
htmlcss


Solution 1:[1]

You could try doing:

.photo-perfil {
  display: inline-block;
  margin: 30px;
  border: 2px solid yellow;
}

img {
  margin-top: -20px;
  margin-left: -20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

May not be the best solution but it does the job.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions