数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何移除div内图片下方的额外空间？
要移除div内图片下方的额外空间，我们可以使用CSS。以下CSS属性可以用来去除这个空间：
- vertical-align属性
- line-height属性
- display属性
在继续之前，让我们看看图片下方的额外空间是什么样的：
div中的图片下方可能会有额外的空间。这看起来很烦人，应该移除，如下所示。我们已将该空间标记为下方的额外空间：
现在让我们看看解决方案：
使用vertical-align属性清除图片下方的额外空间
vertical-align属性决定文本在一行内或表格单元格内的对齐方式。以下是可能的取值：
baseline - 元素的基线与父元素的基线对齐。
sub - 元素的基线降低到适合下标文本的位置。
super - 元素的基线升高到适合上标文本的位置。
top - 元素框的顶部与行框的顶部对齐（在内联内容的上下文中），或与表格单元格的顶部对齐（在表格的上下文中）。
text-top - 元素框的顶部与该行中最高的内联框的顶部对齐。
middle - 元素的基线与由父元素基线加上父元素字体x高度的一半定义的点对齐（在内联内容的上下文中）。
bottom - 元素框的底部与行框的底部对齐（在内联内容的上下文中），或与表格单元格的底部对齐（在表格的上下文中）。
text-bottom - 元素框的底部与该行中最低的内联框的底部对齐。
percentage - 元素的基线根据line-height属性值的给定百分比升高或降低。
length - 元素的基线根据给定的长度值升高或降低。此属性允许负长度值。此属性的长度值为0与值baseline具有相同的效果。
示例
现在让我们看一个使用vertical-align属性清除图片下方额外空间的例子
<!DOCTYPE html> <html> <head> <title>Remove extra space</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { width: 613px; border: 4px solid gray; } .container img { vertical-align: bottom; } </style> </head> <body> <h1>Learn Billiards</h1> <div class="container"> <img src="https://tutorialspoint.com/billiards/images/billiards.jpg"alt="Tutorial"> </div> </body> </html>
使用line-height属性清除图片下方的额外空间
line-height属性修改构成文本行的内联框的高度。以下是可能的取值：
normal - 指示浏览器将元素中行的距离设置为“合理”的距离。
number - 元素中行的实际高度是此值乘以元素的字体大小。
length - 元素中行的高度是给定的值。
percentage - 元素中行的计算高度是元素字体大小的百分比。
示例
现在让我们看一个使用line-height属性清除图片下方额外空间的例子
<!DOCTYPE html> <html> <head> <title>Remove extra space</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { width: 613px; border: 4px solid gray; line-height: 0%; } </style> </head> <body> <h1>Learn Billiards</h1> <div class="container"> <img src="https://tutorialspoint.com/billiards/images/billiards.jpg"alt="Tutorial"> </div> </body> </html>
使用display属性清除图片下方的额外空间
display属性影响元素最基本的呈现，有效地将元素分类为某种类型的元素。以下是可能的取值：
inline - 此值使元素生成内联级框；例如，HTML元素STRONG、CODE或EM（以及其他元素）。元素显示时将生成一个或多个内联框。
block - 此值使元素生成块级框；例如HTML元素P、H1或PRE（以及其他元素）。元素显示时将生成一个块框。
list-item - 此值使元素同时生成块框和列表项内联框。在HTML中，LI元素是此类元素的唯一示例。
run-in - 在某些情况下，此值将导致元素被插入到后续元素的开头。如果将元素A设置为display: run-in，并且后面跟着块级元素B，则A成为B的第一个内联级框。如果跟随A的元素不是块级元素，则A成为块级框。
compact - 在某些情况下，此值将导致元素放置在后续元素的一侧。
marker - 此值将生成的內容设置为标记；因此，仅当在块级元素上设置:before和:after伪元素时才应使用它。
table - 此值使元素生成块级表格框。这类似于HTML元素TABLE。
inline-table - 此值使元素生成内联级表格框。虽然HTML中没有类似物，但可以将其想象成一个传统的HTML表格，它可以出现在文本行中间。
table-cell - 此值声明元素为表格单元格。这类似于HTML元素TD。
table-row - 此值声明元素为表格单元格行。这类似于HTML元素TR。
table-row-group - 此值声明元素为表格行组。这类似于HTML元素TBODY。
table-column - 此值声明元素为表格单元格列。这类似于HTML元素COL。
table-column-group - 此值声明元素为表格列组。这类似于HTML元素COLGROUP。
table-header-group - 此值声明元素为始终在表格顶部可见的单元格组，位于任何行或行组之前，但在任何顶部对齐的表格标题之后。这类似于HTML元素THEAD。
table-footer-group - 此值声明元素为始终在表格底部可见的单元格组，位于任何行或行组之后，但在任何底部对齐的表格标题之前。这类似于HTML元素TFOOT。
table-caption - 此值声明元素为表格的标题。这类似于HTML元素CAPTION。
none - 元素根本不会生成任何框，因此既不会显示也不会影响文档的布局。
示例
<!DOCTYPE html> <html> <head> <title>Remove extra space</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { width: 613px; border: 2px solid gray; } .container img { display: block; } </style> </head> <body> <h1>Learn Billiards</h1> <div class="container"> <img src="https://tutorialspoint.com/billiards/images/billiards.jpg"alt="Tutorial"> </div> </body> </html>
4K+ 次浏览
