display
First of all, we need to briefly explain the main three main attributes of display, namely block, inline-block, inline. Only the main ones are mentioned here. You can learn about other inherit, none, etc. by yourself.
inline : The width and height cannot be defined, the content determines the position
inline-block : The width and height can be defined, and the content determines the position
block : Width and height can be defined, exclusive to one line
All three attributes can be set padding, margin but the recognition space is different
block , the upper and lower margins will be merged, and the largest margin value will be taken.
inline-block , it does not form upper and lower margins merged with block
inline , it is indeed possible to set margin and padding, but when it is arranged, it will only recognize its left and right margin+padding spaces, and the upper and lower margin and padding spaces will be ignored, as follows
First of all, this is an inline with margin+padding defined, which is aligned with inline-block by default.
This is after canceling the inline-block, it can be found that the padding and margin above it are ignored
This is after adding two blocks up and down, the effect is self-evident
The above are all from personal exploration, please correct me if not
vertical-aligin
Regarding vertical-aligin, the effect of personal practice, it is used on inllne-block , but does not control inline-block, but controls the alignment of inline elements adjacent to it, for example:
If there are inline elements before and after an inline-block, and I set vertical-align: middle; on the inline-block, the following effect will appear
Please experiment by yourself. Since there are a lot of writings about this on the Internet, here is a brief description of its usage.
It's also personal research, please correct me if I don't