已关闭,此问题需要details or clarity。目前不接受答复。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。
23小时前关闭
Improve this question
服务部分的CSS代码审查和优化
我在一个网站的服务部分工作,并希望得到一个代码审查和一些优化建议以下CSS代码。
问题:
在.services类中,我将高度降低到330px,以更好地适应内容。但是,这样做后,我注意到部分下面有不必要的背景空间。我想去掉这个多余的空间
.services {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.0005rem 0;
height: 330px;
}
after decreasing the height here, there was background space below that I did not want
.services h1 {
background-color: #7f7f7f;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
transform: translate(0, -210px);
justify-content: center;
}
.services h2 {
transform: translateY(25px);
}
.services p {
transform: translateY(10px);
}
.services__wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
.services__card {
margin: 10px;
height: 425px;
width: 300px;
border-radius: 4px;
border: 1px solid #ffffff;
display: flex;
flex-direction: column;
transform: translate(310px, -250px);
justify-content: top;
color: #000;
background-color: #ffffff;
}
.services__card h2 {
text-align: center;
}
.services__card p {
text-align: center;
margin-top: 24px;
font-size: 17px;
}
.services__btn {
display: flex;
justify-content: center;
margin-top: 16px;
}
.services__card button {
color: #4286f4;
border: none;
background: none;
align-items: end;
}
.services__card button:hover {
cursor: pointer;
}
body {
margin-bottom: 50px;
}
/* Media queries for responsive design */
@media screen and (max-width: 1300px) {
.services__wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 768px) {
.services__wrapper {
grid-template-columns: 1fr;
}
}
1条答案
按热度按时间vh0rcniy1#
我刚看到机身底部有一个“50px的边距”。尝试将其设置为0。这可能解决问题。