0

I wrote the following code

.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>

Why is there Still Space Between Hello And Canvas , when i have already made every padding and margin zero for each element?I am confused about this thing.

And i have came to know about inline and block elements and i used them but no avail , they deleted the space between two canvas element when i made them block , but i had not clue how are they working ?

If you see something wrong in this question please comment , and i will correct it, i am still learning ways of this site.

Update As People are pointing that it is line height , Can you include example in your answer and explain what does it mean?

  • 1
    probably line-height? – philipp Jan 22 '17 at 18:05
  • Please answer the question with adequate , information. and what about line height ? –  Jan 22 '17 at 18:05
  • that is a css property. Sometimes, with so some fonts, it helps. – philipp Jan 22 '17 at 18:08
  • @philipp Can you explain? –  Jan 22 '17 at 18:19
  • Well I could, but the explanation is hidden is the way Fonts are made up. So all in all, a »g«, is crossing the baseline downwards, a »B«, can go above and the `line-height`, is somewhat of the »save bounding box«, which should show all Glyphs completely. But that might produce gaps. So it is depended on the font, even it is a standard one, like »Helvetica« – philipp Jan 22 '17 at 18:33

1 Answers1

1

There isn't any space between Hello and Canvas. It's just the line-height of the font.

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

line-height: 50%;

Or you can look for another font. (with only uppercase)

Font explained: http://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html

  • Can you explain what line height is ? –  Jan 22 '17 at 18:23
  • It's the distance between lines in paragraphs. Look at this page: http://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html –  Jan 22 '17 at 19:07
  • Did you get it? –  Sep 14 '17 at 09:32