How to remove extra space below the image inside div?

HTML Web Development Front End Technology

To remove extra space below the image inside div, we can use CSS. The following CSS properties can be used to get rid of the space −

The vertical-align property
The line-height property
The display property

Before moving further, let us see how the extra space below an image looks like −

The image in a div can have an extra space below. It looks annoying and should be removed as shown below. We have marked the space as extra space below −

Let us now see the fix −

Clear the extra space below an image using the vertical-align property

The vertical-align property determines the alignment of text within a line, or within a table cell. Following are the possible values

baseline − The baseline of the element is aligned with the baseline of the parent element.
sub − The baseline of the element is lowered to the point appropriate for subscripted text.
super − The baseline of the element is raised to the point appropriate for superscripted text.
top − The top of the element's box is aligned with the top of the line box, in the context of inline content, or with the top of the table cell in the context of tables.
text-top − The top of the element's box is aligned with the top of the highest inline box in the line.
middle − The baseline of the element is aligned with the point defined by the baseline of the parent element plus half the x-height of the parent element's font, in the context of inline content.
bottom − The bottom of the element's box is aligned with the bottom of the line box, in the context of inline content, or with the bottom of the table cell in the context of tables.
text-bottom − The bottom of the element's box is aligned with the bottom of the lowest inline box in the line.
percentage − The baseline of the element is raised or lowered by the given percentage of the value for the property line-height.
length − The baseline of the element is raised or lowered by the given length value. Negative length values are permitted for this property. A length value of 0 for this property has the same effect as the value baseline.

Example

Let us now see an example to clear the extra space below an image using the vertical-align property


<!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.tutorialspoint.com/billiards/images/billiards.jpg"alt="Tutorial">
   </div>
</body>
</html>

Clear the extra space below an image using the line-height property

The line-height property modifies the height of the inline boxes which make up a line of text. Here are the possible values −

normal − Directs the browser to set the height of lines in the element to a "reasonable" distance.
number − The actual height of lines in the element is this value multiplied by the font-size of the element.
length − The height of lines in the element is the value given.
percentage − The height of lines in the element is calculated as a percentage of the element's font-size.

Example

Let us now see an example to clear the extra space below an image using the line-height property


<!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.tutorialspoint.com/billiards/images/billiards.jpg"alt="Tutorial">
   </div>
</body>
</html>

Clear the extra space below an image using the display property

The display property affects the most basic presentation of an element, effectively classing the element as a certain type of element. Here are the possible values −

inline − This value causes an element to generate an inline-level box; for example, the HTML elements STRONG, CODE, or EM (among others). The element will generate one or more inline boxes when it is displayed.
block − This value causes an element to generate a block-level box; for example the HTML elements P, H1, or PRE (among others). The element will generate a block box when it is displayed.
list-item − This value causes an element to generate both a block box and a list-item inline box. In HTML, the LI element is the only example of such an element.
run-in − Under certain conditions, this value will cause the element to be .inserted. into the beginning of the following element. If an element A is set to display: run-in and is followed by a block-level element B, then A becomes the first inline-level box of B. If the element following A is not block-level, then A becomes a block-level box.
compact − Under certain conditions, this value will cause the element to be placed to one side of the following element.
marker − This value will set generated content to be a marker; thus, it should be used only in conjunction with the :before and :after pseudo- elements when they are set on block-level elements.
table − This value causes an element to generate a block-level table box. This is analogous to the HTML element TABLE.
inline-table − This value causes an element to generate an inline-level table box. While there is no analogue in HTML, it can be envisioned as a traditional HTML table which can appear in the middle of a line of text.
table-cell − This value declares the element to be a table cell. This is analogous to the HTML element TD.
table-row − This value declares the element to be a row of table cells. This is analogous to the HTML element TR.
table-row-group − This value declares the element to be a group of table rows. This is analogous to the HTML element TBODY.
table-column − This value declares the element to be a column of table cells. This is analogous to the HTML element COL.
table-column-group − This value declares the element to be a group of table columns. This is analogous to the HTML element COLGROUP.
table-header-group − This value declares the element to be a group of cells which is always visible at the top of the table, placed before any row or row-groups but after any top-aligned table captions. This is analogous to the HTML element THEAD.
table-footer-group − This value declares the element to be a group of cells which is always visible at the bottom of the table, placed after any row or row-groups but before any bottom-aligned table captions. This is analogous to the HTML element TFOOT.
table-caption − This value declares the element to be a caption for a table. This is analogous to the HTML element CAPTION.
none − The element will generate no boxes at all, and thus will neither be displayed nor impact the layout of the document.

Example


<!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.tutorialspoint.com/billiards/images/billiards.jpg"alt="Tutorial">
   </div>
</body>
</html>