我正在用 HTML 和 CSS 做我的第二个项目,我正在疯狂地试图弄清楚为什么在不应该有的地方有一个空格。它是如此具体,我什至不知道如何搜索它。
基本上我有两个带有元素的主块,这两个块之间有一个间隙,但我不知道为什么。我已经尝试更改其他间隙和对齐命令。什么都不起作用。 问题是图像和文字“Salada Variada”之间的差距
:root {
--texts-color: #242424;
}
body * {
font-family: Poppins;
color: var(--texts-color);
}
body {
background-color: #d8eed2;
}
#Info {
display: flex;
height: 696px;
width: 360px;
flex-direction: column;
align-items: center;
gap: 0px;
background-color: #fdfdfd;
border-radius: 32px 32px 0px 0px;
background: var(--surface, #fdfdfd);
margin: 104px auto 0px;
border: solid brown 1px;
column-gap: 0px;
}
#imagem {
display: flex;
width: 280px;
height: 280px;
transform: translateY(-23%);
border: solid orange 1px;
}
#Container {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
border: pink solid 1px;
}
#name-plate {
text-align: center;
font-weight: 600;
font-size: 24px;
font-family: Poppins;
line-height: 32px;
border: solid purple 1px;
}
#energia-porção {
display: flex;
padding: 8px 0px;
align-items: center;
gap: 24px;
align-self: stretch;
border: red solid 1px;
width: 296px;
height: 64px;
}
ul {
list-style: none;
display: flex;
flex-direction: column;
border: green solid 1px;
align-items: center;
gap: 8px;
flex: 1 0 0;
padding-left: 0;
}
<div id="Main"></div>
<div id="Info">
<div id="imagem"><img src="./Midia/dish-image.png" alt="" /></div>
<div id="Container">
<div id="name-plate">Salada Variada</div>
<div id="energia-porção">
<ul>
<li>Energia</li>
<li>221,15 kcal</li>
</ul>
<ul>
<li>Porção</li>
<li>240 g</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button></button>
</div>
#imagem 有这个属性:transform:translateY(-23%);
拆掉就没有缝隙了