我應該如何風格化這個：<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>在某種程度上，圖像占據(jù)了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;}但我總是看到圖像右側有一個空白區(qū)域。