css如何让块无间隙

藏色散人
Freigeben: 2023-01-03 09:31:03
Original
1655 Leute haben es durchsucht

css让块无间隙的实现方法:首先创建一个HTML示例文件;然后定义一个内联元素span为inline-block元素;最后移除标签间的空格即可。

css如何让块无间隙

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inline-block元素及去掉间隙的方法,在这里做一个简单的总结。

注:在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。

inline-block是什么?

inline-block 即内联块,在CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。

内联块元素具有了内联元素以及块级元素的特性:(1)元素之间可以水平排列 (2)可以当做一个块级元素来设置各种的属性,例如:width、height、padding等。

例子1:定义一个内联元素span为inline-block元素

    
  
这是一个div
这是一个div
这是一个div
Nach dem Login kopieren

效果如下:

017e53e7d2d6b8ccb72091f238d2b43.png

移除inline-block导致div间隙的方法:

1、移除标签间的空格

元素间的间隙出现的原因是元素标签之间的空格,把空格去掉间隙自然就会消失。

    
  
这是一个div
这是一个div
这是一个div
Nach dem Login kopieren

效果如下:

881ce8084b33a13db351b85a7edfeaf.png

2、将所有div放到同一个div中

    
  
这是一个div
这是一个div
这是一个div
Nach dem Login kopieren

效果如下:

ab38726249a9e6f474fbd33f056bddb.png

3、通过设置父元素的font-size:0来解决这个问题

该方法适用于只包含图片的div

【推荐学习:css视频教程

Das obige ist der detaillierte Inhalt voncss如何让块无间隙. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!