Member Avatar for GiddyupGilbert

I can't seem to find anything on spacing landscape. I know you can add Vertical space with <br>, but is that the best way. Any thoughts would be appreciated.
Thnks, Giddyup

  • 4 Contributors
  • 4 Replies
  • 112 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

— treat labels and inputs as a single layout unit and control spacing with CSS instead of inserting extra line breaks. pointed toward using CSS spacing and was right to suggest wrapping elements. For accessible, maintainable forms, modern layout methods make it easy to keep inputs aligned even when labels vary in length.

A simple, robust pattern uses Flexbox: make each label+input a row, give the label a fixed (or variable) column width, and let the input fill the remaining space.

<div class="form-row">
  <label for="address">Address</label>
  <input id="address" name="address" type="text">
</div>

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.form-row label {
  width: 10rem;      /* consistent label column */
  margin-right: 0.5rem;
  text-align: right;
}
.form-row input {
  flex: 1;
  min-width: 0;
}
@media (max-width: 480px) {
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row label { width: auto; text-align: left; margin-bottom: 0.25rem; }
}

If you need something even simpler (older projects), set label { display: inline-block; width: ... } so inputs line up without tables. Use rem units or a CSS custom property for the label width if you might change it globally.

Notes and troubleshooting: always associate labels with inputs via for/id for accessibility; avoid using placeholders as the only label; prefer CSS Grid for multi-column forms; and avoid table markup for presentation. For reference see Flexbox basics and the HTML label element on MDN: Flexbox basics and label element.

Recommended Answers

All 4 Replies

Member Avatar for Member #949455

I can't seem to find anything on spacing landscape. I know you can add Vertical space with <br>, but is that the best way. Any thoughts would be appreciated.

What do you mean by that? Can you explain a litte more about the spacing?

Member Avatar for AleMonteiro

No, <br/> is not the best option to vertical space. I suggest using margin and/or padding, depend on your needs.

Member Avatar for GiddyupGilbert

For starters I'm kind of new at this. If you put, say a form string, name: type=text will give you the input space. Sometimes maybe the next string will be address:, a longer one, so your input fields will not align equally to the left. So, what I want to do in a form is give it accurate spacing so I can place things where I need. I haven't run across that type of info yet. On the vertical, thnks AleMonteiro, I will play with that and see how it goes.
Giddyup

Member Avatar for JorgeM

You can also place your input elements within div elements and the text in other div elements, then use style properties such as width, height, padding, and margin.

Alternatively, what a lot of people do is use table related elements. You can easily build a table, add rows, columns, and just style the table to not have any borders. This is an easy way to position the content. The only problem with this method is that its not semantically correct. Tables should be used for tabular data, not presentation. Its not "wrong" to do it this way, its just not appropriate.

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.