Two identical elements of the range, but have different widths

I create two span elements and add them to the DOM with visibility = hidden. After adding both span elements to the DOM, I get the width and height of both elements.

Surprisingly, the width and height are different.

text, font size, font family are all the same in both ranges. What could be causing the size difference?

var sp1 = goog.dom.createDom('span', null); sp1.innerText = text; sp1.style.fontSize = "60px"; sp1.style.fontFamily = family; sp1.style.visibility = "hidden"; goog.dom.appendChild(document.body, sp1); var sp2 = goog.dom.createDom('span', null); sp2.innerText = text; sp2.style.fontSize = "60px"; sp2.style.fontFamily = family; sp2.style.visibility = "hidden"; goog.dom.appendChild(document.body, sp2); var sz1 = goog.style.getSize(sp1); var sz2 = goog.style.getSize(sp2); assert(sz1 == sz2) 

HTML pages

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="ff.css"> <style> #id3{ /*font-family: abracadabra, Orator W01 Slanted, Alpha Jazz W00 Regular;*/ font-family: abracadabra, Orator W01 Slanted; } #id4{ font-family: Alpha Jazz W00 Regular, Orator W01 Slanted, Times New Roman, sans-serif; } </style> <title>Web Fonts</title> </head> <body> <div id="id1">1. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="id2">2. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="id3">3. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="id4">4. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="test1" style="position: absolute; top: 0px; z-index: 2; width: auto; right: 0px; background-color: rgb(255, 0, 0); display: none;"> <div style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(8, 12, 18); padding: 10px 5px;"> <div style="float: left; background-image: url(logo.png); padding-left: 25px; color: rgb(0, 0, 0); font-size: 18px; background-position: 0% 50%; background-repeat: no-repeat no-repeat;">test</div> <div style="float: right;"><img src="logo.png" style="margin: 0px;"></div> <div class="clear"></div> </div> <div id="test2"></div> <div id="test3"></div> </div> </div> <span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span> <span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span> </body> </html> 

A space in questions is two spaces at the end of an html document.
1st size = (1217, 67)
The size of the second = (1267, 136)

+4
source share
2 answers

Thanks for the HTML. Consider this: the font size you set for these spans is quite large, and when the window is not wide enough, the text inside the spans starts to wrap. Spaces have display:inline; by default, and when wrapping, two texts will be displayed as one, but with a different packaging, because the second continues immediately after the first, and its text will most likely be split to another place. If you installed display:block; for these intervals, there should be no difference.

+1
source

If they are next to elements of different sizes (for example, next to a div, and not on a separate separate line), they will be different sizes, because they are inline elements and not block-level elements.

+1
source

Source: https://habr.com/ru/post/1501466/


All Articles