{"id":18851,"date":"2020-07-01T11:28:26","date_gmt":"2020-07-01T18:28:26","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18851"},"modified":"2020-12-28T23:42:50","modified_gmt":"2020-12-29T07:42:50","slug":"css-span","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-span\/","title":{"rendered":"CSS Span"},"content":{"rendered":"\n

<span><\/code> elements are a generic HTML element similar to <div><\/code>. If you recall, divs are a generic container primarily used for the layout of a webpage and take up as much space as they can because they are a block<\/strong> element. 
<\/p>\n\n\n\n

Spans are an inline<\/strong> element. They only take up as much space as needed and are primarily used for emphasizing something. 
<\/p>\n\n\n\n

Here is a visual representation of each:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang="en">\n<head>\n   <meta charset="UTF-8">\n   <meta name="viewport" content="width=device-width, initial-scale=1.0">\n   <title>Divs vs Spans<\/title>\n   <style>\n       * {\n               box-sizing: border-box;\n               font-size: 1.4rem;\n               font-family: monospace;\n           }\n           .div-style {\n               background: purple;\n               color: blanchedalmond;\n               height: auto;\n               padding: 20px;\n               margin: 10px;\n           }\n           .span-style {\n               background: orange;\n               color: black;\n           }\n           .highlight {\n               font-style: italic;\n               display: inline-block;\n               height: 100px;\n               width: 75%;\n               display: flex;\n               align-items: center;\n               background:mediumslateblue;\n               color: ivory;\n           }\n           h3 {\n               text-decoration: underline;           }\n   <\/style>\n<\/head>\n<body>\n   <h3>Divs<\/h3>\n       <div class="div-style">I'm a div<\/div>\n       <div class="div-style">I take up as much space as I can<\/div>\n   <h3>Spans<\/h3>\n       <span class="span-style">I'm a span<\/span>\n       <span class="span-style">\nI only take up exactly as much space as I need.\n<\/span>\n       <span class="span-style">I emphasize text a lot.<\/span>\n \n       <div class="div-style">\n           <span class="span-style">Spans can go inside divs...<\/span>\n           <p>... have different styling than other text...<\/p>\n           <span class="span-style"\n               >...and are inline elements that can't have height or width\n               manipulated unless you set\n               <span class="highlight">display: inline-block<\/span><\/span\n           >\n       <\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
We use classes to group the spans and the divs together to change the color and background color in CSS. Remember height or width on spans cannot be changed unless you add the display: inline-block<\/code> property.
<\/p>\n\n\n\n
Here\u2019s what it looks like when they work together:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n   <head>\n       <meta charset="UTF-8" \/>\n       <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n       <title>Divs\/Spans<\/title>\n       <style>\n           * {\n               box-sizing: border-box;\n               font-size: 1.4rem;\n               font-family: monospace;\n           }\n           .div-style {\n               background: purple;\n               color: blanchedalmond;\n               height: auto;\n               padding: 20px;\n               margin: 10px;\n           }\n           .span-style {\n               background: orange;\n               color: ivory;\n           }\n           h3 {\n               text-decoration: underline;;\n           }\n           .nav {\n               background:goldenrod;\n               padding: 20px;\n           }\n           .headline {\n               font-weight: bold;\n               font-size: 1.6rem;\n           }\n           .flex-container {\n               display: flex;\n           }\n           .container {\n               display: flex;\n               flex-direction: column;"\n           }\n           .sidebar-main-container {\n               background:indianred;\n               padding: 20px;\n           }\n           .sidebar {\n               background: white;\n               color: black;\n               width: 40%;\n               padding: 20px;\n           }\n           .main-container {\n               width: 60%;\n               padding: 20px;\n               background:green;\n               font-size: 1.2rem;\n           }\n           .main-content {\n               width: 100%;\n               margin: 10px 0px;\n               display: flex;\n           }\n           .child-container {\n               width: 50%;\n               font-size: 1.0rem;\n           }\n           .pink {\n               background: pink;\n               color: black;\n           }\n           .red {\n               background: red;\n           }\n           p{\n               font-size: 1.2rem;\n           }\n           .footer {\n               text-align: center;\n               background: cornflowerblue;\n           }\n           .footer span {\n               font-size: .7rem;\n           }\n       <\/style>\n   <\/head>\n   <body>\n       <h3>Using Divs and Spans Together:<\/h3>\n \n       <div class="div-style container">\n           <div class="headline">Div 1: Main Overall Container<\/div>\n           <div class="nav">\n               <h2>Div 1a: Header<\/h2>\n               <p>Divs can create boxes for web layout<\/p>\n           <\/div>\n           <div class="sidebar-main-container">\n               <p>Div 1b: Sidebar-Main Content<\/p>\n               <div class="flex-container">\n                   <div class="sidebar">\n                       <span style="font-size: 1.2rem;">Div 1b.1<\/span>\n                       <span style="font-size: 1.2rem; color: purple;">Sidebar Container<\/span>\n                   <\/div>\n                   <div class="main-container">\n                       <span style="font-size: 1.2rem;">Div 1b.2<\/span>\n                       <span style="font-size: 1.2rem; color: orange;">Main Container<\/span>\n                       <div class="main-content">\n                           <div class="child-container pink">Child 1 1b.2.1<\/div>\n                           <div class="child-container red">Child 2 1b.2.2<\/div>\n                       <\/div>\n                   <\/div>\n               <\/div>\n               <div class="footer">\n                   <span>Footer<\/span>\n                   <span>Container<\/span>\n                   <span>Goes Here<\/span>\n               <\/div>\n           <\/div>\n          \n       <\/div>\n      \n   <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Spans and divs work in conjunction with other HTML elements to create the basic building blocks of your website. Spans can be styled separately from your divs to create emphasis. <\/p>\n","protected":false},"excerpt":{"rendered":"<span> elements are a generic HTML element similar to <div>. If you recall, divs are a generic container primarily used for the layout of a webpage and take up as much space as they can because they are a block element.  Spans are an inline element. They only take up as much space as needed…","protected":false},"author":77,"featured_media":18835,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18851","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCSS Span: difference between block and inline elements<\/title>\n<meta name=\"description\" content=\"Spans are a special type of inline element that can be nested inside a larger container and styled differently to stand out from others. Learn how to use elements in this guide.\" \/>\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\/css-span\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Span\" \/>\n<meta property=\"og:description\" content=\"Spans are a special type of inline element that can be nested inside a larger container and styled differently to stand out from others. Learn how to use elements in this guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-span\/\" \/>\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-07-01T18:28:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T07:42:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"729\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS Span\",\"datePublished\":\"2020-07-01T18:28:26+00:00\",\"dateModified\":\"2020-12-29T07:42:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/\"},\"wordCount\":146,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-span\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-span\/\",\"name\":\"CSS Span: difference between block and inline elements\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg\",\"datePublished\":\"2020-07-01T18:28:26+00:00\",\"dateModified\":\"2020-12-29T07:42:50+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Spans are a special type of inline element that can be nested inside a larger container and styled differently to stand out from others. Learn how to use elements in this guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-span\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg\",\"width\":1020,\"height\":729,\"caption\":\"wingspan of a young bald eagle in flight.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-span\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Span\"}]},{\"@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":"CSS Span: difference between block and inline elements","description":"Spans are a special type of inline element that can be nested inside a larger container and styled differently to stand out from others. Learn how to use elements in this guide.","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\/css-span\/","og_locale":"en_US","og_type":"article","og_title":"CSS Span","og_description":"Spans are a special type of inline element that can be nested inside a larger container and styled differently to stand out from others. Learn how to use elements in this guide.","og_url":"https:\/\/careerkarma.com\/blog\/css-span\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T18:28:26+00:00","article_modified_time":"2020-12-29T07:42:50+00:00","og_image":[{"width":1020,"height":729,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-span\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-span\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS Span","datePublished":"2020-07-01T18:28:26+00:00","dateModified":"2020-12-29T07:42:50+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-span\/"},"wordCount":146,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-span\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-span\/","url":"https:\/\/careerkarma.com\/blog\/css-span\/","name":"CSS Span: difference between block and inline elements","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg","datePublished":"2020-07-01T18:28:26+00:00","dateModified":"2020-12-29T07:42:50+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Spans are a special type of inline element that can be nested inside a larger container and styled differently to stand out from others. Learn how to use elements in this guide.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-span\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-span\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-span\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/mathew-schwartz-b2_5y436Kfs-unsplash.jpg","width":1020,"height":729,"caption":"wingspan of a young bald eagle in flight."},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-span\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Span"}]},{"@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\/18851","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=18851"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18851\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18835"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}