It’s all fixed. thank you. I need to make a note of this so I don’t forget. This happened before also.
1 Like
The exact same thing that was causing the gap more than 2 weeks ago.
2 Likes
What do you mean? bottom?
Changing what to bottom?
How do I change it to bottom?
Do not change anything to bottom.
EDIT:
Consider this:
The rows of boxes are blocks.
Therefore, the button should be a block also, not an inline element. There will be no problem with line-heights or space.
Blocks stack.
1 Like
vertical-alignment
Button is by default an inline element. inline elements have a vertical-alignment property. The default value of that property is baseline. The baseline is a little above the bottom, hence the gap.
Setting vertical-alignment: bottom will close the gap, as will display: block because it will no longer be an inline element, it will become a block.
3 Likes
As ever, I recommend the Codrops reference for full details: http://tympanus.net/codrops/css_reference/vertical-align/
Let me fix this. (See posts 29 & 30)
No, JS bin is correctly rendering the button element as inline.
Yes, JSBin does not appear to be applying a doctype to the code.
Setting this button element to display:block is the simplest and most logical solution.
If the button were one of several inline with one another, then vertical-align:top or bottom would be the logical solution.
2 Likes
Well now I’m really confused. JS Bin rendered the element without the white gap below it, unlike JS Fiddle, CodePen and every browser I tried. (And as the original question was “why”, I mistakenly took your response as a reply to that.)
I have been making a slew of errors this past couple of days and this is yet another. Your DID say JSBin.!.
I apologize. Let me look again… will be back.
EDIT:
The problem seems to stem from JSBin effectively not applying a doctype to the code, which is to say:
If the code is opened in a browser exactly as asasass posted it, it renders just as it does in JSBin.
If an HTML5 doctype and head is added, then it renders as it does in jsfiddle (and on my PC).
Does this help? (I am not a JSBin user so I know nothing about it’s ideosyncrasies…)
So you are correct… JSBin is causing the problem. and I had another synapse error.
Perhaps @PaulOB knows of an explanation for the apparent JSBin bug.
1 Like
It always has the doctype tag there and applies it when I use jsbin - you’d have to actually delete that tag for it to not be applied.
3 Likes
oh. that was why. when I had put the code in I erased all that stuff. On jsfiddle all that isn’t on there, I didn’t know it was supposed to be there for a reason. Well, either way the code wasn’t working properly. But it’s good to know not to erase that stuff when I test codes. so thanks.
That line in my post was inappropriately “conclusionary”. I realized that and followed it with my testing observations which is all that I should have posted. I should have deleted that line, but didn’t.
Thank you for the feedback, Stephen.
All of the code you see on sites like that is there for a reason. All you are supposed to add to the HTML in jsbin are your tags for the content. The CSS and JavaScript have their own tabs.
How come jsfiddle doesn’t have any codes shown?
What did jsfiddle say when you asked them?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.