如何去除 div 内图片下方的多余空间?

htmlweb developmentfront end technology更新于 2024/6/4 17:48:17

要去除 div 内图片下方的多余空间，我们可以使用 CSS。以下 CSS 属性可用于去除这些空间 -

vertical-align 属性
line-height 属性
display 属性

在继续之前，让我们先看看图片下方的多余空间是什么样的 -

div 内的图片下方可能会有多余的空间。这看起来很烦人，应该像下面这样去除。我们已将该空间标记为下方的额外空间 -

现在让我们看看修复方法 -

使用 Vertical-align 属性清除图像下方的额外空间

Vertical-align 属性决定了文本在一行或表格单元格内的对齐方式。以下是可能的值

baseline − 元素的基线与父元素的基线对齐。
sub − 元素的基线降低到适合下标文本的位置。
super − 元素的基线升高到适合上标文本的位置。
top − 在行内内容中，元素框的顶部与行框的顶部对齐;在表格中，元素框的顶部与表格单元格的顶部对齐。
text-top − 元素框的顶部与行中最高的行内框的顶部对齐。
middle − 元素的基线与定义的点对齐在行内内容中，元素框的底部与行框的底部对齐;在表格中，元素框的底部与表格单元格的底部对齐。
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://www.cainiaomax.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://www.cainiaomax.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://www.cainiaomax.com/billiards/images/billiards.jpg"alt="Tutorial">
   </div>
</body>
</html>