“café 😀” has 6 characters: four letters, the space and the emoji. The emoji uses two UTF-16 code units and four bytes. é uses two bytes. The UTF-8 total is 10 bytes.
SMS limits and database fields often count bytes or code units, not what a person sees. That is why the page shows all three numbers.
Questions
Are a character and a code unit the same?
Not when there is an emoji. One emoji is one character and two UTF-16 units.
Does a space count?
Yes in the total. The line without spaces removes spaces, tabs and line breaks.
Why does the byte count change with an accent?
UTF-8 stores a letter such as é in two bytes.