Home  >  Article  >  Web Front-end  >  How to make blocks gapless in css

How to make blocks gapless in css

藏色散人
藏色散人Original
2021-03-22 16:09:541701browse

How to implement css to make blocks without gaps: first create an HTML sample file; then define an inline element span as an inline-block element; and finally remove the spaces between tags.

How to make blocks gapless in css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

When making mobile pages recently, inline- is often used Block elements are used for layout, but inevitably one problem will be encountered, which is the gap between inline-block elements. These gaps will cause some layout problems, and the gaps need to be removed. Here is a brief summary of inline-block elements and methods for removing gaps.

Note: In HTML, div, p, hx, form, ul, li, dl, and dd are block-level elements.

What is inline-block?

inline-block is an inline block, which can be divided into three types in CSS element classification: inline elements or inline elements, block-level elements, and inline block elements.

Inline block elements have the characteristics of inline elements and block-level elements: (1) elements can be arranged horizontally (2) can be used as a block-level element to set various attributes, such as: width , height, padding, etc.

Example 1: Define an inline element span as an inline-block element

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    background: red;
    display:inline-block;   
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>

The effect is as follows:

How to make blocks gapless in css

Remove inline-block Methods to cause gaps in divs:

1. Remove the spaces between tags

The reason for the gaps between elements is the spaces between element tags. If you remove the spaces, the gaps will disappear naturally.

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    background: red;
    display:inline-block;   
}
</style>
</head>
<body>
<div>这是一个div</div><div>这是一个div</div><div>这是一个div</div>
</body>
</html>

The effect is as follows:

How to make blocks gapless in css

2. Put all divs into the same div

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    
    background: red;
    display:inline-block;       
}
</style>
</head>
<body>
    <div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</div>
</body>
</html>

The effect is as follows:

How to make blocks gapless in css

3. Solve this problem by setting the font-size:0 of ​​the parent element

This method is suitable for divs that only contain images

[Recommended Study: css video tutorial

The above is the detailed content of How to make blocks gapless in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn