In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly explains "how to solve the problem of spaces between HTML inline elements". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and go deep into it slowly to study and learn "how to solve the problem of spaces between HTML inline elements" together.
1. Why are there spaces between elements?
If there are spaces (newlines) between code that writes line-level elements (including inline-block elements), the browser displays spaces between elements.
The sample code is as follows:
.box span {
background-color: red;
}
span1
span2
span3
Note:
No matter how many spaces we type between elements, it resolves to a single space;
The space itself is a character, so the size of the space is determined by the font-size of the parent element. The larger the font set by the parent element, the larger the space.
2. How do you remove spaces between elements?
No spaces between element codes: the reason for the element to produce spaces is that we type spaces or newlines. Solution 1 is that there are no spaces between element codes. The disadvantage is that the code is not beautiful and readable.
span1span2span3
Comments off spaces: browsers will not parse html code comments, comments off spaces can also eliminate spaces between elements, the drawback is cumbersome, unattractive.
span1span2span3
Set font-size of parent element to 0: space size is determined by font size of parent element, so font-size: 0 can be added to parent element;
Note that elements that originally need to eliminate spaces need to reset their font-size, otherwise the font size will inherit the parent element. The disadvantage is that extra css attributes are added, and this method does not apply in Safari.
.box {
font-size: 0; /* Set font size for parent element */
}
.box span {
background-color: red;
font-size: 16px; /* Prevent font attribute inheritance */
}
Add float to elements: The principle is that adding float will trigger BFC, and a boundary will be generated between elements to form an independent rendering space. There will be no spaces between elements. It is a better solution at present.
.box span {
float: left;
background-color: red;
}
Thank you for reading, the above is "HTML line level elements between the space problem how to solve" the content, after the study of this article, I believe we have a deeper understanding of HTML line level elements between the space problem how to solve this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.