Пространство между заголовком и холстом

Я написал следующий код

.bluecolor{background-color : skyblue;}
canvas{width: 100pt;margin:0px;border: 5px solid;}
h1{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
 
<html>
<head>
<title>Hello World</title>  
</head>
<body>
<h1>Hello</h1>
<canvas id = "canvas1" class = "bluecolor"></canvas>     
</body>    
</html> 
 

Почему между Hello и Canvas все еще остается пространство, когда я уже сделал все отступы и нулевое поле для каждого элемента? Я запутался в этом.

И я узнал о встроенных и блочных элементах, и я использовал их, но безрезультатно, они удалили пробел между двумя элементами canvas, когда я их сделал блоком, но я понятия не имел, как они работают?

Если вы видите что-то не так в этом вопросе, пожалуйста, прокомментируйте, и я исправлю это, я все еще изучаю способы этого сайта.

Обновление, поскольку люди указывают, что это высота строки. Можете ли вы включить пример в свой ответ и объяснить, что это значит?

1 ответ

Там нет места между Hello а также Canvas, Это просто высота строки шрифта.

https://css-tricks.com/almanac/properties/l/line-height/

line-height: 50%;

Или вы можете найти другой шрифт. (только заглавными буквами)

Объяснение шрифта: http://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html

Другие вопросы по тегам