即使使用显示内联块，填充在 CSS 中也不起作用
不知道我做错了什么，但是这些标签/输入和按钮元素中的填充样式根本不起作用，因为当我一遍又一遍地刷新 chrome 时，没有任何变化。在网上搜索后，我只找到了向这些元素添加 display: inline-block 的解决方案，但它仍然不起作用。请参阅下面我的完整代码：
.block {
display: inline-block;
margin: 5px 0px;
padding: 10px auto 10px 10px;
width: 100%;
}
.bold {
font-size: 20px;
font-weight: 400;
}
input[type="radio"] {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
border: 1px solid #aaaaaa;
margin: auto 4px;
}
input[type="radio"]:checked {
background-color: #aaaaaa;
}
body {
font-family: "Montserrat", sans-serif;
}
button {
background-color: white;
border: 1px solid #da1e1e;
color: #da1e1e;
display: inline-block;
padding: 10px auto;
width: 100%;
}
button:hover {
background-color: #da1e1e;
color: white;
}
form {
width: 500px;
margin: 0 auto;
}
h1 {
font-size: 35px;
font-weight: 500;
text-align: center;
}<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet" />
<title>New Patient Form</title>
</head>
<body>
<form action="">
<h1>Register as a New Patient</h1>
<label class="bold" for="full name">Full Name</label>
<input class="block" type="text" id="full name" name="full name" placeholder="e.g. George Lucas" required/>
<label class="block bold">Sex</label>
<label class="change"><input name="sex" type="radio" value="male" required />Male</label
>
<label class="change"
><input name="sex" type="radio" value="female" required />Female</label
>
<label class="change"
><input name="sex" type="radio" value="other" required />Other</label
>
<label class="block bold" for="date of birth">Date of Birth</label>
<input class="block" type="date" id="date of birth" name="date of birth" required/>
<label class="block bold" for="email address">Email Address</label>
<input class="block" type="email" id="email address" name="email address" placeholder="e.g. g.lucas@gmail.com" required/>
<button type="submit">Submit Details</button>
</form>
</body>
</html>