I am looking to insert an image inside an <li> element without affecting the size of the <li>. The image should be positioned in the top-left corner with no margin from the top, bottom, or left edges, as shown below:
https://i.sstatic.net/LIBwX.png
My initial approach involved using the following HTML code:
<li><img src="image.jpg">text</li>
along with this CSS:
ul li
{
max-height:52px;
}
ul li img
{
max-width:52px;
max-height:52px;
margin-top:-15px;
margin-left:-15px;
float:left;
}
This resulted in a layout that met my requirements and was responsive across different screen sizes. However, I feel that there may be a more professional way to achieve this.
What is considered the best practice for inserting an image with zero margins within an
<li>element?In my current implementation, I set a max-height for the
<li>element to achieve the desired result. Is there a method that utilizes a parent-child relationship to make the image interactive based on the height of the<li>element?