Member Avatar for vijukumar

please pass me a css code and xhtml as well where i can increase or decrease the spaces between mt text and text box which are in the same line

  • 4 Contributors
  • 3 Replies
  • 94 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by kavithakesav

Dani AI

Generated

asked how to change the horizontal space between inline text and a text box. and pointed toward using CSS; below is a concise, modern approach that keeps markup semantic, is easy to tweak, and avoids non-semantic spacing hacks.

<label class="form-row">
  <span class="label-text">Name</span>
  <input type="text" name="name" />
</label>

.form-row {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* change this value to increase or decrease spacing */
}

.form-row .label-text {
  min-width: 80px; /* optional: fixed label column */
}

.form-row input {
  padding: 6px 8px;
  box-sizing: border-box;
}

Use gap for precise horizontal spacing; it is simple and readable. If you need to support very old browsers that lack flex gap, add a fallback like margin-right on the label span. Avoid using &nbsp; or extra empty elements for spacing. Keep labels associated with inputs (wrap the input or use for/id) for accessibility. For vertical alignment issues use align-items: center (flex) or vertical-align: middle (inline-block). For narrow screens switch labels to display: block or allow wrapping so the form stays usable on mobile. This pattern works cleanly with Bootstrap or plain CSS and is easy to adjust by changing the gap value.

Recommended Answers

All 3 Replies

Member Avatar for ~s.o.s~

This question would be more appropriate in the CSS/HTML forum. Moved.

Member Avatar for peter_budo

Read and learn w3schools.com

The CSS margin properties define the space around elements.

Member Avatar for kavithakesav

Use div Margin and div Padding for u r format

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.