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.
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
The effect is as follows:
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.
The effect is as follows:
2. Put all divs into the same div
The effect is as follows:
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!