css隐形的空隙(inline的坑)_html/css_WEB-ITnose
好久没写东西了,最近有点忙,再加上自己在捣鼓一个video转gif的东西(github:传送门),是一个用node-webkit(mac版用atom-shell)做的一个桌面应用,也就没怎么写东西,不过刚好弄这东西的时候遇到了空隙的问题就来查查资料,讨论讨论,研究研究.....
先看下debug代码
<!DOCTYPE html><html> <head> <style media="screen"> div { display: inline-block; background-color: yellow; padding: 2px; /*font-size:0;*/ } img { /*vertical-align:bottom;*/ /*display: block;*/ } span { font-size:80px; } </style> </head> <body> <div> <img src="/static/imghw/default1.png" data-src="js.png" class="lazy" / alt="css隐形的空隙(inline的坑)_html/css_WEB-ITnose" > </div> <span>phantom</span> </body></html>只是普通的用div装一个img,然后让div比img多出1px(有点类似于边框),可是问题来了,上图:
很明显,黄色的部分是div的padding,可是下面的padding比较大.
解决的方法有3种(也就是我css注释掉的3行):
给父亲元素加上--
1:font-size:0;
或者给img元素加上--
2:vertical-align:bottom;
3:display: block;
但是,这是为什么?如果一般的猴子,肯定会用,能解决问题就行了,但是我们不是一般的猴子,我们是程序猿!!!
想来想去,既然font-size:0;能解决,应该和font有关.
为了解释为什么,我又切了2张图来辅助理解,上图:
第一张图,我用控制台来当量尺,移到div的padding一样大的时候,发现只有P的下面被挡道了,其他的好像距离控制台的空隙都一样大,所以我又截了第二张图,
vertical-align是用来设置基线的,font-size为0的时候,就不存在基线的差距,所以应该是基线搞定鬼~
一番翻墙之后发现,原来vertical-align的默认基线是Base Line,(所以p才会有一部分被挡道了).
写到这里,突然想起之前2个inline元素之间有空隙,也是给父亲元素加上font-size来解决的,而这次给img加上block也可以解决问题,说到底还是inline元素的锅~.所有的inline元素都有和文字一样具有字号和行高属性,所以img也会被基线影响到,这就是问题所在
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
