Как убрать пробел между inline-block элементами?
Опубликовано: 4 Февраля, 2022
Есть два метода удаления пробелов между встроенными блочными элементами.
Метод 1. Назначьте размер шрифта родительского элемента встроенного блока равным 0 пикселей, а затем назначьте правильный размер шрифта для
встроенный блочный элемент
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> |
Выход:
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> |
ВЫХОД:
