{"id":21298,"date":"2020-08-17T12:47:44","date_gmt":"2020-08-17T19:47:44","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21298"},"modified":"2020-12-29T13:12:33","modified_gmt":"2020-12-29T21:12:33","slug":"html-space-type","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-space-type\/","title":{"rendered":"Differentiating Between the Types of Spaces in HTML"},"content":{"rendered":"\n
In HTML, sometimes we need to create space, and it\u2019s not as easy as just using the spacebar to create it. This is especially true if we need multiple spaces in a row or tabs \u2013 HTML tends to collapse those multiple spaces to one space. This is where HTML entities come in. In this article, we take a look at the different HTML entities that allow us to create space of all different sizes. <\/p>\n\n\n\n
There are four main types of spaces we can work with in HTML elements: thin space, non-breaking space, en space, and em space. The code editor below outlines the differences in size between the four types: <\/p>\n\n\n\n
<!DOCTYPE html>\n<!--\n<html>\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width">\n <title><\/title>\n <style>\n span {\n background: pink;\n }\n \n <style>\n body {\n font-family: Arial\n }\n <\/style>\n<\/head>\n \n<body style="font-family:Arial;">\n <h1>Differences in Sizes of Space Entities in HTML<\/h1>\n <!-- At beginning of sentences -->\n <p style="font-size:16px;text-decoration:underline;font-weight:bold;"> Beginning of Sentences<\/p>\n <p><span> <\/span>I am a sentence.<\/p>\n <p><span> <\/span>I am a sentence.<\/p> \n <p><span> <\/span>I am a sentence.<\/p>\n <p><span> <\/span>I am a sentence.<\/p>\n <!-- in between words -->\n <p style="font-size:16px;text-decoration:underline;font-weight:bold;"> In Between Words<\/p>\n<p>I<span> <\/span>am<span> <\/span>a<span> <\/span>sentence.<\/p>\n<p>I<span> <\/span>am<span> <\/span>a<span> <\/span>sentence.<\/p> \n <p>I<span> <\/span>am<span> <\/span>a<span> <\/span>sentence.<\/p>\n<p>I<span> <\/span>am<span> <\/span>a<span> <\/span>sentence.<\/p>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The different space types can serve different purposes. In this code example, we look at the differences between a standard space using the spacebar vs using an HTML entity. <\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width">\n <title>repl.it<\/title>\n<\/head>\n<body style="font-family:Arial;">\n<div>\n <strong>Using nbsp; example<\/strong>\n <br\/>\n <br\/>\n <div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Dr. John Doe<\/div>\n <div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Dr. John Doe<\/div>\n<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Reno, NV<\/div>\n <div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Reno, NV<\/div>\n\t\n <\/div>\n\n<div>\n <strong>Using emsp; example<\/strong>\n <br\/>\n <br\/>\n <div style="border:1px solid red;margin:10px;">\n <p>Here are some quotes.<\/p>\n \n <p> <em> —To be or not to be, that is the question...<\/em><\/p>\n <p> <em> —This above all: to thine own self be true...<\/em><\/p>\n <p> <em> —What's in a name? That which we call a rose\nBy any other word would smell as sweet...<\/em><\/p>\n \n <\/div>\n <div style="border: 1px solid red;margin:10px;">\n <p>Here are some quotes.<\/p>\n <p> <em> —To be or not to be, that is the question...<\/em><\/p>\n <p> <em> —This above all: to thine own self be true...<\/em><\/p>\n <p> <em> —What's in a name? That which we call a rose\nBy any other word would smell as sweet...<\/em><\/p>\n <\/div>\n <\/div>\n<\/body><\/pre><\/div>\n\n\n\n
When you have a phrase, name or number that should not be wrapped to the next line, use an nbsp character entity. When you have a block of text that needs to be emphasized in it\u2019s own line or paragraph, use an emsp character entity. <\/p>\n\n\n\n
This table outlines the codes that can be used with different size spaces: <\/p>\n\n\n\n<\/figure>\n\n\n\n
Any of these codes work for their respective space size\/type. Browser support is fairly widespread for Entity Names, but if it turns out to be not the case, Hex and Dec codes work as well.<\/p>\n","protected":false},"excerpt":{"rendered":"In HTML, sometimes we need to create space, and it\u2019s not as easy as just using the spacebar to create it. This is especially true if we need multiple spaces in a row or tabs \u2013 HTML tends to collapse those multiple spaces to one space. This is where HTML entities come in. In this…","protected":false},"author":77,"featured_media":21299,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-21298","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\n
Differentiating Between the Types of Spaces in HTML | Career Karma<\/title>\n<meta name=\"description\" content=\"There are many ways to insert space into an HTML Document. Here we explain the differences between the four major ways to create space using HTML Entities on CareerKarma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-space-type\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Differentiating Between the Types of Spaces in HTML\" \/>\n<meta property=\"og:description\" content=\"There are many ways to insert space into an HTML Document. Here we explain the differences between the four major ways to create space using HTML Entities on CareerKarma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-space-type\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-17T19:47:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T21:12:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Differentiating Between the Types of Spaces in HTML\",\"datePublished\":\"2020-08-17T19:47:44+00:00\",\"dateModified\":\"2020-12-29T21:12:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/\"},\"wordCount\":245,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-space-type\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/\",\"name\":\"Differentiating Between the Types of Spaces in HTML | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg\",\"datePublished\":\"2020-08-17T19:47:44+00:00\",\"dateModified\":\"2020-12-29T21:12:33+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"There are many ways to insert space into an HTML Document. Here we explain the differences between the four major ways to create space using HTML Entities on CareerKarma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-space-type\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"Space\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-space-type\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/careerkarma.com\/blog\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Differentiating Between the Types of Spaces in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Differentiating Between the Types of Spaces in HTML | Career Karma","description":"There are many ways to insert space into an HTML Document. Here we explain the differences between the four major ways to create space using HTML Entities on CareerKarma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/html-space-type\/","og_locale":"en_US","og_type":"article","og_title":"Differentiating Between the Types of Spaces in HTML","og_description":"There are many ways to insert space into an HTML Document. Here we explain the differences between the four major ways to create space using HTML Entities on CareerKarma.","og_url":"https:\/\/careerkarma.com\/blog\/html-space-type\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-17T19:47:44+00:00","article_modified_time":"2020-12-29T21:12:33+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Differentiating Between the Types of Spaces in HTML","datePublished":"2020-08-17T19:47:44+00:00","dateModified":"2020-12-29T21:12:33+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/"},"wordCount":245,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-space-type\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/","url":"https:\/\/careerkarma.com\/blog\/html-space-type\/","name":"Differentiating Between the Types of Spaces in HTML | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg","datePublished":"2020-08-17T19:47:44+00:00","dateModified":"2020-12-29T21:12:33+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"There are many ways to insert space into an HTML Document. Here we explain the differences between the four major ways to create space using HTML Entities on CareerKarma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-space-type\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/andy-holmes-rCbdp8VCYhQ-unsplash.jpg","width":1020,"height":680,"caption":"Space"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-space-type\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"Differentiating Between the Types of Spaces in HTML"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=21298"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21298\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/21299"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Codes](\"https:\/\/lh6.googleusercontent.com\/LtOPfPj7TsDo8_xvrDt7dztP7h_-We_gDLlktiBcadm89wvzR2YmOG3sKqXHbVFiCrli1HdS61swp3RWBr1n3rWNCkLLvocygJdBk2AjPRD7eqEA9xssSFkeAPRydrP9jhNcogjw\")
<\/figure>\n\n\n\n