html - Padding not working in CSS even with display inline-block
问题描述
Not sure what I was doing wrong, but the padding style in these label/input and button element is not working at all as nothing has changed when I refresh chrome over and over. After searching up online I've only found solution for adding display: inline-block to these elements, but it is still not working. Please see the entirety of my codes below:
.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>
解决方案
推荐阅读
- javascript - 是否可以使用 Javascript/jQuery 将表格数据转移到不同的单元格?
- docusignapi - 获取 token_type=Application,而不是 DocuSign /oauth/token 中的承载
- php - 如何创建一个带有复选框的表格 yii2
- python - Python:如何处理大于最大 UDP 安全数据包大小的 UDP 数据包?
- angular - 在 Highcharts 中实现错误处理时面临的问题
- java - 定义一个可重用的变量并在 JBehave 的内部故事文件中使用它
- c# - 如何为 ASP.NET Core Web api 添加全局验证?
- amazon-web-services - AWS S3 存储桶存储类型和同步
- wordpress - wordpress多站点中单个站点的多个域
- python - Elasticsearch:我想计算特定值在特定字段中出现的次数