資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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.tw/billiards/images/billiards.jpg"alt="Tutorial"> </div> </body> </html>
4K+ 次瀏覽
