In this codepen, the label 4 is positioned in an aligned way
I mean the Y position in an axis system is not good.
What is the right way to fix this misalignment? I may wait a perfect alignment bottom of text and bottom border of the button. Or I may want a centering of the text within the available space. 2 options. So 2 solutions are needed.
In this case, adding padding does not work.
Thank you in advance.
The usual way for inline and inline-block elements is to use vertical-align:
input,
label{
vertical-align:middle; /* or top or bottom or percent or length neg. or pos. */
}
If you have not solved your question, please create 2 make-believe screenshots showing the two options that you may want and attach the images to your next post.
And why can’t padding and maring work here as tehy suually do? it is useful to move things around with a certain number of picels. If you put a padding you will see it is ignored. Please explain why.
Please forgive me but Earthlish is not my first language. Could you please show drawings of what you wish to achieve. And could you please show your code demonstrating the use of padding and margin that doesn’t work for you? We cannot see what you are thinking.
Please help us help you. 
Because those here are inline objects, they sit on a text-line, therefor top/bottom padding and margin doesn’t apply as they do on block or inline-block objects.
There’s more to it though. 
You’ll get a more reliable alignment using flexbox.
e.g.
div {
display: flex;
align-items: center;
/* align-items:baseline;*/
}
Thanks for your answer.
I succeeded to run the 2 configurations using flexbox.
More questions.
In this codepen the two divs Div3 and Div4 overlap over each other. The Div4 text overlaps over the label in the Div3. Why does this happen?
https://codepen.io/TVilmart/pen/BMQqvE
How to position elements pixel by pixel like block elements allow using margin and padding? Is it possible using “display: block”? Sometimes it is practical to move things a few pixels in a certain direction in a precise way.
This definition is too hard to understand. I have read it many times I don’t get the nuances. Please clarify the details. What I don’t understand is the last sentence. With “the flush”.
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
baseline
All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
Actually, the default without anything already looks like the the flex solution with baseline. I don’t like the result with flex and center either. I was thinking I want to specify the pixels myself so it looks better.
I want the centered option. But there is default built-in padding.like space inside the label element below the text. The built-in padding is not configurable by the css, well as it seems to me.
I found a solution that works. I added margin-top: 2px for the label element.
Maybe because you didn’t closer the div tag properly.
You have this in several places:
</div
It should be
</div>
Before asking a question please run your html and css through the validators to pick up typos like this and also to help you learn howto debug.
You really need to learn up on the different display:properties and what they mean because the question you are asking is not directly related to display but display will affect how elements are moved by positioning/margins etc. All the different display types have rules that go with them and how you move them will depend on what type of display is being used.
You can generally move things with margins while maintaining the flow of the document but vertical margins do no apply to some display types like inline or table-cell and setting an element to block may change the layout.
Generally if you do things properly to start with then they align correctly without too much trouble.
No you only apply it when you need it because flex is a whole layout system on its own. You can’t just throw it at everything,
It is always better to use a class added to the element you wnat to style rather than just applying to an element selector i.e. instead of div{} use .myclass{} etc.
That basically means it is placed level with the baseline (flush to it).
Specs are dry and terse and you do need a good grasp of css to get the best from them. Sometimes its not possible to simplify a complicated behaviour because of the dynamics involved. Sometimes even the simplest concepts are much more involved than you think. That’s why its important to have controlled learning process taking everything in order and gradually things become clearer.
A bad move because you don’t really understand the relationship properly and although it may appear to work its unlikely to be manageable or consistent cross browser. Remember form elements (if we are still talking about the checkbox) are completely different cross browser so applying a 2px margin to a label element isn’t going to give you consistent results.
You need to show an example of what you are doing as the flex example lines perfectly to the centre or the baseline. It may be that you are not understanding the term baseline or perhaps you are looking for some custom alignment that is not a default position.
It’s fine to move things if you think they look better but generally you don’t want to be fighting pixels at every opportunity as that is futile.
You must remember that form controls are styled completely differently cross browsers so if you are changing their alignment by a px or 2 then it is unlikely to look the same in another browser.
Sometimes you may have no choice but to move the element manually but applying a margin may change the alignment more than you think because it becomes part of the box that is being aligned.
OK thank you. I sent another comment before you replied.
I am now adding a margin to the label because the label has a built-in padding. It causes the centering by flex with align-items: center, to not look well centered.
Is it a good practice to add margins with pixels because elements have built-in paddings?
Why are you adding a margin?
The margin then becomes part of the alignment and all elements will be put out.
I think you need to post the code you are using so we can see exactly what you have and then tell us what is wrong with it and what you would like. At the moment the goalposts seem to have walked off the field
OK. There is a problem between browsers.
Here is what I meant. See div-3 and div-4. I need margin-top because label has a built in padding. I am using firefox-dev.
But maybe I should ignore my preference of 2 pixels shifting since it is not a good practice.
I think if I want to add margins to the label in firefox, I would need to use Javascript to detect firefox, and then add the margins using a css class only used in firefox. But it is acceptable to not have things exactly as I wish. BEcause when CSS depends on the borwser, it adds complexity.
I think I looked at a very specific detail with built-in padding in labels in firefox. Most people probably do not care. But exactness seems to me important.
No No No …
<input type="checkbox">
<label>
Label 1
</label>
Slightly off topic, but you should either wrap your labels round the input tag or add the for attribute together with an id on the input tag.
That demo is broken please use the validator to check your css.
Have you removed margins from the input?
Many elements have margins (or padding applied). That’s why many users use a reset stylesheet (although that is overkill). A basic course on CSS would introduce you to these things.
Try something like this:
I have nudged the label down by 1px using position:relative so that the flow of the document is not altered but don’t take this as a licence to use it everywhere because you should not.
I generally would not be concerned about the 1px discrepancy and would instead center the label rather than trying to find an imaginary baseline of an input.
Other question.
Dopes it makes sense to put the checkboxes inside a form even if it is a client-side only application?
How does a from makes the html more semantic for all use cases with an input checkbox? It is basically like a div with the name form.