列表样式时仍保留一些垂直空间:未定义任何内容。
https://product-landing-page.freecodecamp.rocks/#how-it-works
如果您选中此项目并滚动到定价标签,则其定义与我的定价标签完全相同,并且其行为也不同。
My price label:
Project's label
我的CSS:
/* ========== PRICE ======= */
#cost {
display: flex;
flex-direction: row;
justify-content: center;
}
.price-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.lvl {
background-color: #dddddd;
text-align: center;
font-size: 1.4em;
color: rgb(65, 65, 65);
padding: 5px;
width: 100%;
}
#cost ol li {
padding: 5px 0;
margin: 0;
}
li {
list-style: none;
}
项目的CSS:
#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
.product > h2 {
margin-top: 15px;
}
.product > ol {
margin: 15px 0;
}
.product > ol > li {
padding: 5px 0;
}
也许有人能给我解释一下,这样我就能明白这里发生了什么
2条答案
按热度按时间46scxncf1#
如果您查看应用于ol元素的所有CSS,您会注意到有一个包含填充的所有内容(*)的设置:0;
这将覆盖浏览器中与ol元素相关的填充的默认设置。
您可能需要或不需要设置填充:0表示开始时的所有内容。这取决于您的具体用例。
就像你引用的网站一样,类似的东西可以在一些样式表的顶部看到--这意味着作者将自己添加任何填充和边距设置,而不是依赖默认的浏览器设置。
[The框大小设置意味着例如填充和边框尺寸被包括在元素的尺寸中]。
如果你不想这样一个全局的方法来取消设置填充,那么把填充:ol元素本身的样式设置中的0。例如:[我不知道您的HTML结构,所以无法准确地说出这应该是什么]
sauutmhj2#
只需添加填充:0