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

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

    
  这是一个div
 这是一个div
 这是一个div

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.

    
  这是一个div
这是一个div
这是一个div

Copy after login

The effect is as follows:

How to make blocks gapless in css

2. Put all divs into the same div

    
   这是一个div
 这是一个div
 这是一个div

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!