此问题在此处已有答案：
Padding for Inline Elements（3个答案）
3天前关闭。
我创建一个表单，所以我做了输入字段和标签，然后我希望字段和标签之间有一个空间。
我试图通过在label类中使用padding-bottom来做到这一点，但它不起作用，当我在浏览器中使用devtools时，我可以看到填充区域，但它不影响元素之间的距离，实际上输入是在我添加到标签的填充区域的顶部。
我确实得到了我想要的，通过添加margin到输入中，但想了解为什么标签中的填充不起作用，出于学习的原因。
.main {
padding: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.header {
display: flex;
height: 80px;
width: 100%;
background-color: rgb(0, 0, 0);
}
.body {
display: block;
margin: 0;
background-color: #141414;
min-height: 100vh;
}
.button {
background-color: rgba(0, 0, 0, 0);
border-style: solid;
font-size: 12px;
border-width: 1px;
border-color: rgb(116, 22, 224);
border-radius: 5px;
font-weight: bold;
color: #ffffff;
width: 150px;
height: 100%;
min-height: 25px;
cursor: pointer;
}
.button:hover {
background-color: rgb(116, 22, 224);
border-style: solid;
border-width: 1px;
border-color: rgb(116, 22, 224);
border-radius: 5px;
font-weight: bold;
color: #ffffff;
width: 150px;
height: 100%;
min-height: 25px;
cursor: pointer;
}
.navbar {
margin-left: auto;
margin-right: 50px;
padding: 20px;
max-width: 1000px;
align-items: center;
}
.labels {
color: white;
width: 100%;
font-size: 20px;
font-family: monospace;
padding-bottom: 25px;
}
.inputs {
background-color: #000000;
box-sizing: border-box;
border-style: solid;
height: 35px;
width: 100%;
border-width: 2px;
border-radius: 10px;
border-color:rgb(116, 22, 224);
}
.title {
color: white;
font-family: monospace;
}
.form {
align-content: center;
justify-content: center;
}
.formcontainer {
box-sizing: border-box;
background-color: black;
border-radius: 10px;
padding: 25px;
width: 400px;
max-width: 400px;
height: 600px
}
.formcontainerdelimiter {
max-width: 400px;
display: block;
}<html lang="en">
<body class="body">
<header class="header">
<div class="navbar">
<Link href="/register">
<button class="button">REGISTER</button>
</Link>
</div>
</header>
<main class="main">
<div class="formcontainerdelimiter">
<div class="formcontainer">
<form class="form" action="" method="post">
<h1 class="title">Crie sua conta</h1>
<label class="labels" htmlFor="email">E-mail:</label><br />
<input class="inputs" type="email" id="email" name="email" required /><br />
<label class="labels" htmlFor="password">Password:</label><br />
<input class="inputs" type="password" id="password" name="password" required /><br />
<label class="labels" htmlFor="confirm-password">Confirm Password:</label><br />
<input class="inputs" type="password" id="confirm-password" name="confirm-password" required /><br />
<input type="submit" value="Submit" />
</form>
</div>
</div>
</main>
</body>
</html>
1条答案
按热度按时间mwg9r5ms1#
我通过在labels类中使用设置为'block'的display属性并删除
<br>标记来解决这个问题。默认情况下，Label标签是inline元素，这意味着它们不接受任何padding或margin。inline元素的要点是它们可以并排显示，或者顾名思义，可以一行显示。
当设置为“block”时，它们可以接受padding，margin和block元素接受的其他设置，但它们不能再在旁边有其他元素，这是我更喜欢的。
解决这个问题的另一种方法是将display属性设置为'inline-block'，这将利用这两种方式，允许它接受设置作为块元素，并将其他元素显示为内联元素。