Are you aware that instead of using jsFiddle, if the script is copied and pasted into a standalone web-page then most popular browsers have the following wonderful feature:
right-click over the problematic script
select “Inspect element” from the drop-down menu option
a. a separate browser window will open showing the source
b. CSS elements can be toggled by selecting a checkbox
once the relevant problem is found then apply to the web-page script
That was done in order to hide the whitespace nodes that were created. But that method is a magic number that never works 100%. It is evident when you zoom in/out. As seen below…
The old way to fix it was with display:table on the parent and display:table-cell on the children.
You can eliminate all the problems and do your alignment at the same time using flexbox.
I didn’t change anything. I downloaded Ray’s flex-layout.html file and ran it in the browser. My understanding was that you don’t want any red, and in Ray’s version, there is no red.
If you have other requirements, then please explain them more clearly.
I haven’t tested, but I see three different input types.
text
submit
button
IMHO, styling them so they’re not easily distinguishable is probably not the best UX design.
Might the “one pixel lower top border” be a result of browser defaults? Would “text only” zoom (as opposed to page zoom) break the design?
Sorry for blathering on, it just seems to be too “magic number-ish” and fragile from what I can see. I have a feeling a lot of potential problems could be avoided if more appropriate HTML was used.
No, it is still using the magic numbers negative margin. You are attemting to hide the whitespace nodes that your HTML formatting has created. Your inputs are basically inline-blocks and when they are on their own line in the HTML it creates a whitespace node.
Here is your fiddle with a red line showing for me right when I land on the page. You may be trying to code for your devices but that don’t mean that everyone will see it the same as you. The when I zoom in the gaps jump around.