在列表组项目中使用图像占据所有内部空间

Question

我应该如何风格化这个：<div class="list-group">  <li class="list-group-item">    <div class="media">      <img th:if="${geral.logo}" th:src="@{/imagem/download/__${geral.logo.id}__}" width="180px" height="360px" class="mr-3" th:alt="${geral.titulo}">      <svg th:unless="${geral.logo}" width="180px" height="360px" class="bd-placeholder-img mr-3" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">        <title>Placeholder</title>        <rect width="100%" height="100%" fill="#868e96"></rect>        <text x="50%" y="50%" transform="rotate(90)" fill="#dee2e6" dy=".3em" th:text="${geral.titulo}"></text>      </svg>    </div>  </li>...</div>在某种程度上，图像占据了list-group-item元素的所有空间，图像边缘和项目边框之间没有空白。更新我试过这个：html:<div class="list-group">  <li class="list-group-item">    <div class="media logo">      <img th:if="${geral.logo}" th:src="@{/imagem/download/__${geral.logo.id}__}" width="180px" height="360px" class="mr-3" th:alt="${geral.titulo}">      <svg th:unless="${geral.logo}" class="bd-placeholder-img mr-3" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">        <title>Placeholder</title>        <rect width="100%" height="100%" fill="#868e96"></rect>        <text x="50%" y="50%" transform="rotate(90)" fill="#dee2e6" dy=".3em" th:text="${geral.titulo}"></text>      </svg>    </div>  </li>...</div>CSS：li.list-group-item {  padding: 0;}.logo {    display: flex;    flex-direction: row;    justify-content: space-between;}但我总是看到图像右侧有一个空白区域。

Answer 1

这应该有效

.list-group-item{
        padding: 0;
    }