如何使用填充物使弹性元件变大

Question

我有这个div，我试图在顶部和底部增加一点填充，以使文本与边缘保持距离。我所说的div是父div(#skip(。CSS如下：

我试过使用填充和边距，但两者都没有达到预期效果。有什么建议吗？

.break {
flex-basis: 100%;
width: 0;
}
.subtext {
font-size: 30px;
text-transform: capitalize;
}
#skip {
flex-wrap: wrap;
display: flex;
cursor: pointer;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
transition-duration: 0.5s;
position: absolute;
width: auto;
top: 470px;
left: 50%;
transform: translateX(-50%);
height: 55px;
background: #FFFFFF;
box-shadow: 0px 4px 4px #9f9f9f;
border-radius: 100px;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 28px;
color: #A8C8A3;
transition-duration: 0.3s;
}

<div id="skip" style="height: 5vh;padding-top: ;" class="position-absolute">Entra
<div class="break"></div>
<div class="subtext">Home Page Classica</div>
</div>

Answer 1

1. 删除html中的样式
2. 清理你的代码，删除重复的代码
3. 添加一个包装器，这样您就可以在页面上垂直和水平居中div(我认为这是您的目标(
4. 定义#skip元素的宽度
5. 添加填充，最终删除线条高度

body, html {
height: 100%;
}

#wrapper {
display        : flex;
align-items    : center; /* align vertical */
justify-content: center;  /* align horizontal */
height         : 100%;
}
#skip {
flex-direction     : column;
padding            : 60px 30px;
min-width          : 30%;
border-radius      : 100px;
background         : #FFFFFF;
box-shadow         : 0 4px 4px #9f9f9f;
color              : #A8C8A3;
text-align         : center;
text-transform     : uppercase;
font-size          : 60px;
font-family        : 'Lato', sans-serif;
/* line-height        : 28px; */
cursor             : pointer;
transition-duration: 0.3s;
}
.break {
}
.subtext {
font-size: 30px;
}

<div id="wrapper">
<div id="skip" class="position-absolute">Entra
<div class="break"></div>
<div class="subtext">Home Page Classica</div>
</div>
</div>

Answer 2

.subtext {
font-size: 30px;
text-transform: capitalize;
cursor: auto;
}
#skip {
flex-wrap: wrap;
display: flex;
cursor: pointer;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
transition-duration: 0.5s;
position: absolute;
padding: 30px;
top: 470px;
left: 50%;
transform: translateX(-50%);
height: 505px;
background: #FFFFFF;
box-shadow: 0px 4px 4px #9f9f9f;
border-radius: 100px;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 28px;
color: #A8C8A3;
transition-duration: 0.3s;
}

<div id="skip" class="position-absolute">Entra
<div class="subtext">Home Page Classica</div>
</div>

试试这个！

更新：

不要做width: auto;然后你可以做你的填充

Answer 3

我删除了一些代码只是为了稍微清理一下。

将文本从边缘移开的最干净的方法实际上是使用填充，但正如您所发现的，它会令人恼火地更改父元素的宽度。我们可以通过向要应用填充的元素添加box-sizing: border-box属性来抵消这种影响。这样，填充实际上会放在元素的内部，而不是外部。

在下面的代码片段中，我为父#skip提供了display: flex属性，以及flex-direction: column、justify-content: center和align-items: center。将列中的项目居中时，justify-content将它们垂直对齐，而align-items将它们水平对齐。

为了将所有内容隔开，我继续为.subtext元素添加了一个边距。

您的间距出现如此多问题的原因是，您通过为#skip元素指定一个小于您设置的font-size的结果高度的高度来折叠父元素。

就响应性而言，通常最佳做法是让元素的高度基于元素的内容。

您还应该避免以像素为单位定义线条高度，尽量使用em或rem的。它们根据父元素的字体大小进行调整。

.subtext {
font-size: 30px;
text-transform: capitalize;
margin-top: 32px;
}
#skip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

box-sizing: border-box;
padding: 32px;

transition-duration: 0.5s;
background: #FFFFFF;
box-shadow: 0px 4px 4px #9f9f9f;
border-radius: 100px;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 60px;
color: #A8C8A3;
}

<div id="skip">
Entra
<div class="subtext">Home Page Classica</div>
</div>