After span is set to inline-block, why is there an extra blank when no text is included? -

Source: Internet
Author: User
0 reply content: laxatives
This is what it looks like.
Http://w3help.org/zh-cn/causes/RD3020 Why have I ever asked questions? The main cause of this problem is that the default vertical-align of the element is baseline. In the CSS Standard Visual formatting model details Vertical-align: baseline has the following description:
BaselineAlign the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
Because the location of the baseline of an element needs to be inferred based on the font information it uses (the text in a span may use different fonts due to different character sets ). Therefore, an inline-block with no content will have no baseline. Therefore, the baseline is aligned in the parent container as the baseline. The 3px in your example is the distance between the baseline edge.
Writing it here, I found that the baseline of the parent container cannot be counted. I don't know who can add it.
There are many ways to solve this problem: Set the vertical-align of span to bottom; or add a space for the span content;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.