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:541719browse
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
<!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:
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:
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:
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!