How to remove the space between inline-block elements?
There are two methods to remove the space between inline-block elements.
Method 1: Assign the font size of the parent of the inline block element to 0px and then assign the proper font-size to
the inline block element
Syntax:
parent-element{
font-size:0px;
}
parent-element child-element{
display:inline-block;
font-size:Required font size;
}
The above concept is illustrated by the following code:
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*Assign font-size of parent element to 0px*/ div { font-size: 0px; } /*Making the element inline-block*/ /*Assign proper font-size to the inline block element*/ div span { display: inline-block; background-color: green; font-size: 10rem; } </style> <title>How to remove spaces between inline block elements</title></head><body> <div> <span>Geeks</span> <span>For</span> <span>Geeks</span> </div></body></html> |
Output:
Method 2:Make the display of the parent element to flex.
Syntax:
parent-element{
display:flex;
}
parent-element child-element{
display:inline-block;
font-size:Required font size;
}
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*Making the parent element a flexbox*/ div { display: flex; } /*Making the element inline-block*/ /*Assign proper font-size to the inline block element*/ div span { display: inline-block; background-color:rgb(53, 77, 5); font-size: 10rem; } </style> <title>How to remove spaces between inline block elements</title></head><body> <div> <span>Geeks</span> <span>For</span> <span>Geeks</span> </div></body></html> |
OUTPUT:
Please Login to comment...