HTML Input tag & Gap

HTML input Tag

The HTML tag is used to create interactive form controls that allow users to enter data in a webpage. It supports multiple input types such as text, password, email, number, and more for collecting user information.

HTML Input Types

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

In HTML5, elements are divided into types.
<input> belongs to void elements.

Void elements

• Cannot have closing tag
• Cannot have content inside
• They end in the opening tag itself

But in day-to-day learning, people often say self-closing tag.

CSS gap Property

The CSS gap property defines the spacing (or "gap") between rows and columns in layouts such as Flexbox, Grid, or multi-column layouts. It simplifies the process of creating consistent spacing by combining row-gap and column-gap into one property. You can specify the gap using length units (e.g., px, em) or percentages.

Syntax:
gap: <row-gap> <column-gap>

DIFFERENCE BETWEEN PADDING AND GAP:

Padding

• Padding = space INSIDE an element (inside the border)
• It creates space between the content and the border of that element.
• Think: space inside the box

Syntax:
.box{
padding:20px;
}

Output:
| border |
| padding |
| content |

The text moves away from the border.

Padding belongs to one element only.

Gap

Gap = space BETWEEN child elements

It works only inside:

• flex container
• grid container

Think: space between items

Syntax:
.container{
display:flex;
gap:20px;
}

Example:
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>

Now space appears between A, B, C.

Gap belongs to the parent container, not the child.

Easy Visualization
Padding
[ content ]
^ inside space ^

Gap
[A] [B] [C]
^ between space ^