Member Avatar for ekka

hello
i have set a form with tow tag : first is an input[text] and the seconde is input[submit] , what i try to do is to align the tow element in one line , the problem is i'm getting margin top of the first input tag (input[text]) , i don't know if this is a default margin of the input[text] element , this is my code
thank you in advance.

  • 2 Contributors
  • 3 Replies
  • 528 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short answer: there is not a mysterious default top margin on a text input — the visual offset is almost always the result of inline/baseline alignment and browser-specific rendering of form controls (font metrics, line-height, internal padding and appearance), not a CSS margin on the element. As noted, changing the alignment or the layout model fixes the symptom because it changes how inline boxes are aligned to the baseline. (developer.mozilla.org)

Practical checklist to find and fix it quickly:

  • Inspect the computed styles for the input in DevTools (check computed margin, padding, line-height and font-size). The computed margin is usually zero and the gap comes from alignment/metrics.
  • Apply a small normalization to form controls so they inherit your page font and box model (reset margin, set box-sizing, inherit font) before doing fine-tuning. Example minimal reset: 
    input, button {
margin: 0;
box-sizing: border-box;
font: inherit;
}

    Normalizing form controls reduces cross‑browser surprises; search inputs in particular can have special UA decorations and sizing quirks in some browsers. (smashingmagazine.com)

If you want a simple, future‑proof layout: put the inputs in a single row layout and use the layout system’s vertical‑centering (flexbox with cross‑axis centering is the most common approach). That avoids baseline issues entirely and keeps labels/controls aligned across browsers (add fallbacks or prefixes only if you must support very old browsers). If you prefer not to change layout, equalize heights/line‑height/padding on both controls so their inline boxes share the same metrics. (developer.mozilla.org)

Summary: verify with DevTools (it’s almost never a real top margin), normalize form styles (font/box-sizing/margins), then choose alignment: equalized inline metrics or a layout model (flex/grid) for robust vertical centering.

Recommended Answers

All 3 Replies

Member Avatar for gentlemedia

Set on both inputs a vertical-align: top and you can ditch the display: inline declarations, because inline is already the default display value for inputs.

Another thing;; there's a specific type="search" for your search field instead of using type="text".

Edited by gentlemedia
Member Avatar for ekka

thank you , i know that we can fix it by adding vertical-align : top ( it is commented in the code ) , i m just curious about another fix of this problem .

Member Avatar for gentlemedia

form { display: flex }

But you will need to add the necessary prefixes if you have/want to support older browsers and IE 10 uses even an older (discarded) version of the flexbox specification.
You could also use http://leaverou.github.io/prefixfree/ and be done with it.

Edited by gentlemedia
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.