Shulou(Shulou.com)06/01 Report--

This article mainly introduces "HTML how to delete the gap between inline or inline block elements". In daily operation, I believe many people have doubts about how HTML deletes the gap between inline or inline block elements. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "how to delete the gap between inline or inline block elements by HTML". Next, please follow the editor to study!

In the page layout, we often use inline elements, inline-block elements, but inevitably encounter a problem, that is, there is a gap between these elements (such as the following figure), which will lead to some layout problems, so how to remove the gap between these elements? Let's introduce several methods (take the inline element as an example), hoping to help you.

one

two

three

four

five

six

seven

I am a span.

I am a span.

I am a span.

I am a span.

I am a span.

one

two

three

four

five

six

seven

eight

nine

.demo {

Width: 450px

Height: 200px

Margin: 10px auto

Font-size: 20px

}

.demo span {

Background:#ddd

}

Effect picture:

Remove the space between the element tags

The reason for the gap between elements is the space between element tags (the browser parses newline characters and spaces in HTML into content. Remove the space and the gap will naturally disappear. There are several ways to remove spaces between element tags:

Method 1:

one

two

three

I am a span. I am a span. I am a span. I am a span. I am a span.

Method 2:

one

two

three

four

five

six

seven

I am a span.

I am a span.

I am a span.

I am a span.

I am a span.

Method 3: use HTML comment tags

Use HTML comment tags to comment out spaces between elements so that browsers no longer parse spaces.

one

two

three

four

five

six

seven

I am a span. I am a span. I am a span. I am a span. I am a span.

Effect picture:

Use negative margins

You can use to set the margin (margin) property to a negative value to move the element back to its original position, which needs to be adjusted negatively according to the font size of the parent.

one

two

three

Span {

Margin-left:-6px

}

Note: this is problematic in the old IE (6 and 7).

Set font-size: 0 on the parent element

Spaces are a character space, so setting font-size to zero also makes the space zero. However, in order to display other elements, you need to set the font size of the child elements back to the desired size.

one

two

three

four

five

six

seven

eight

nine

.demo {

Width: 400px

Height: 200px

Font-size: 0

}

.demo span {

Background:#ddd

Font-size: 20px

}

Omit the closing tag

In HTML5, you can omit the closing tag, thereby removing the space between the tags. However, to be compatible with IE6/IE7, you can add the closing tag of the last element.

one

two

three

four

five

six

seven

I am a span.

I am a span.

I am a span.

I am a span.

I am a span.

At this point, the study on "how HTML removes the gap between inline or inline block elements" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.