How to make blocks gapless in css-Front-end Q&A-php.cn

How to make blocks gapless in css

藏色散人

Release： 2023-01-03 09:31:03

Original

1710 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!