Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Add space inside a form's text field with CSS
To add space inside a form's text field, use the CSS padding property. This creates internal spacing between the text and the field's border, making the input more visually appealing and easier to read.
Syntax
input[type="text"] {
padding: value;
}
Example: Adding Space Inside Text Fields
The following example demonstrates how to add internal spacing to text input fields −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
</style>
</head>
<body>
<form>
<label for="subject">Subject</label>
<input type="text" id="subject" name="sub" placeholder="Enter subject name">
<label for="student">Student Name</label>
<input type="text" id="student" name="stu" placeholder="Enter student name">
</form>
</body>
</html>
A form with two text input fields appears. Each field has internal padding of 12px vertically and 20px horizontally, creating comfortable spacing between the typed text and the field borders. The fields also have rounded corners and a light gray border.
Key Points
- The
paddingproperty adds space inside the text field - Use
box-sizing: border-boxto include padding in the element's total width - Different padding values can be applied:
padding: 10px(all sides) orpadding: 12px 20px(vertical horizontal)
Conclusion
Adding padding to form text fields improves user experience by providing comfortable spacing for text input. The padding property is the most effective way to create this internal spacing.
Updated on: 2026-03-15T12:31:45+05:30
10K+ Views
Advertisements