Question

以下代码在按钮上显示了占位符文本，但是占位符文本顶部上方的空间（前导）比下方的空间更大。我希望上方和下方的间距相等，因此我尝试使用padding-bottom，但这并没有更改占位符文本下方的间距。

<div class="signin_text EMail_Pwd_Signin">
<input type="text" class="signup_join" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required>
</div>

.signup_join{
    border-radius: 15px;
    border-style: ridge;
    border-color: rgb(250,250,250);
    border-width: 1px;
    background-color: black;
    height: 45px;
    width: 100%;
    text-align: center;
    font-family: robotoregular;
    font-size: 18pt;
    font-weight: bold;
    color: rgb(150,150,150);
    padding-bottom: 15px;
    letter-spacing: 2px; }

如果按钮底部没有填充，如何在按钮的占位符文本下方添加填充？

Answer 1

将height属性更改为line-height，将在您已经添加text-align:center的情况下将内容水平对齐。

代替给padding-top和padding-bottom占位符u可以增加line-height。将自动配置顶部和底部的高度，最后文本将垂直对齐< / strong>。

检查下面给出的代码：

.signup_join{ border-radius: 15px; border-style: ridge; border-color: rgb(250,250,250); border-width: 1px; background-color: black; line-height: 45px; width: 100%; text-align: center; font-family: robotoregular; font-size: 18pt; font-weight: bold; color: rgb(150,150,150); padding-bottom: 20px; padding-top: 20px; letter-spacing: 2px; } .signup_join_2{ border-radius: 15px; border-style: ridge; border-color: rgb(250,250,250); border-width: 1px; background-color: black; line-height: 75px; width: 100%; text-align: center; font-family: robotoregular; font-size: 18pt; font-weight: bold; color: rgb(150,150,150); padding-bottom: 15px; padding-top: 15px; letter-spacing: 2px; } .signup_join_3{ border-radius: 15px; border-style: ridge; border-color: rgb(250,250,250); border-width: 1px; background-color: black; line-height: 120px; width: 100%; text-align: center; font-family: robotoregular; font-size: 18pt; font-weight: bold; color: rgb(150,150,150); padding-bottom: 15px; padding-top: 15px; letter-spacing: 2px; }

<div class="signin_text EMail_Pwd_Signin"> <input type="text" class="signup_join" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required> </div> <div class="signin_text EMail_Pwd_Signin"> <input type="text" class="signup_join_2" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required> </div> <div class="signin_text EMail_Pwd_Signin"> <input type="text" class="signup_join_3" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required> </div>

Answer 2

我不知道为什么它不起作用。对我来说确实如此。尝试padding: 15px;

使用底部填充仅会在下面应用填充，因此您的文本将不会居中。填充（无规范）可将其应用于文本的各处。

Answer 3

定义和用法

元素的填充是其内容和边界之间的空间。

padding属性是以下内容的简写属性：

padding-top
padding-right
padding-bottom
padding-left

注意：填充在元素内创建额外的空间，而空白则在元素周围创建额外的空间。

此属性可以具有一到四个值。

如果padding属性具有四个值：

padding:10px 5px 15px 20px;
    top padding is 10px
    right padding is 5px
    bottom padding is 15px
    left padding is 20px

如果padding属性具有三个值：

padding:10px 5px 15px;
    top padding is 10px
    right and left padding are 5px
    bottom padding is 15px

如果padding属性具有两个值：

padding:10px 5px;
    top and bottom padding are 10px
    right and left padding are 5px

如果padding属性具有一个值：

padding:10px;
    all four paddings are 10px

注意：不允许使用负值。

如何在占位符文本中添加填充

3 个答案: