{"id":18834,"date":"2020-07-01T13:18:01","date_gmt":"2020-07-01T20:18:01","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18834"},"modified":"2021-01-04T05:53:35","modified_gmt":"2021-01-04T13:53:35","slug":"text-indent","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/text-indent\/","title":{"rendered":"How to Use Text-Indent in CSS"},"content":{"rendered":"\n<p>The CSS indent property, known as the text-indent property, appears similar to a standard indent on the first line of every paragraph in an essay or paper you may have written in school; it indents the first line of every block of text just as you would indent the first line of a paragraph when writing a paper.&nbsp;<br><\/p>\n\n\n\n<p>The code editor below shows how to create text-indent in pixels (px):&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n   &lt;head&gt;\n       &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n       &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n       &lt;title&gt;Text Indent CSS&lt;\/title&gt;\n   &lt;\/head&gt;\n   &lt;style&gt;\n       .example {\n           text-indent: 25px;\n       }\n   &lt;\/style&gt;\n   &lt;body&gt;\n       &lt;p class=&quot;example&quot;&gt;\n           Cat ipsum dolor sit amet, american bobtail. Scottish fold ragdoll, and savannah but thai. Bombay. Lion. British shorthair maine coon. Tom. Leopard cheetah abyssinian and ocicat or american shorthair, but birman donskoy. Ocelot. Devonshire rex cougar for kitten. American shorthair lion. Lynx. Balinese persian so norwegian forest sphynx malkin. Devonshire rex kitten panther. Leopard manx tom donskoy but russian blue, ocicat tabby.\n       &lt;\/p&gt;\n         \n          \n       &lt;p class=&quot;example&quot;&gt; \n           Tomcat malkin, and ocelot. Puma. Balinese . Panther lynx or american bobtail and turkish angora, manx cougar. Malkin scottish fold but sphynx russian blue, maine coon balinese . Ocicat sphynx devonshire rex, mouser bobcat. Kitty maine coon american bobtail havana brown.\n \n       &lt;\/p&gt;\n       &lt;p class=&quot;example&quot;&gt;\n           Birman sphynx ragdoll tabby so british shorthair. Persian bombay thai for birman. Kitty havana brown maine coon tomcat and himalayan, but donskoy. Tom american bobtail birman, and ragdoll or panther or leopard yet american bobtail. Devonshire rex ocicat and munchkin. Lion lynx norwegian forest munchkin, tiger yet cheetah. American bobtail persian. Cornish rex. Leopard. Havana brown savannah puma yet tabby american shorthair, puma but tom. Egyptian mau kitten and lynx, havana brown tom, and siberian munchkin. Ocelot siberian so cheetah. American bobtail tiger, and lion. Kitten russian blue yet ocicat mouser thai and lynx norwegian forest. Panther. Mouser thai egyptian mau but devonshire rex. Lion panther for kitten. Ocelot savannah yet leopard or sphynx. Ocicat savannah puma ragdoll thai for panther siamese.\n          \n       &lt;\/p&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n\n<p>This example shows you an absolute length unit called <strong>pixels (px)<\/strong>. You can also express the indent in relative\/responsive length units like <em>em<\/em>, <em>rem<\/em>, and then <em>%<\/em> of the overall element\u2019s\/paragraph\u2019s width. Try swapping out the pixel size for ems, rems and % to see what happens. <\/p>\n","protected":false},"excerpt":{"rendered":"The CSS indent property, known as the text-indent property, appears similar to a standard indent on the first line of every paragraph in an essay or paper you may have written in school; it indents the first line of every block of text just as you would indent the first line of a paragraph when&hellip;","protected":false},"author":77,"featured_media":18894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18834","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":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use Text-Indent in CSS: A Complete Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Text-Indent is used when you want to have a set indented space on the first line of each block of text in your markup. Here you\u2019ll learn how to use CSS to specify indents of each block of text.\" \/>\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\/text-indent\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Text-Indent in CSS\" \/>\n<meta property=\"og:description\" content=\"Text-Indent is used when you want to have a set indented space on the first line of each block of text in your markup. Here you\u2019ll learn how to use CSS to specify indents of each block of text.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/text-indent\/\" \/>\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-01T20:18:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-04T13:53:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"665\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"How to Use Text-Indent in CSS\",\"datePublished\":\"2020-07-01T20:18:01+00:00\",\"dateModified\":\"2021-01-04T13:53:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/\"},\"wordCount\":127,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/\",\"name\":\"How to Use Text-Indent in CSS: A Complete Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"datePublished\":\"2020-07-01T20:18:01+00:00\",\"dateModified\":\"2021-01-04T13:53:35+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Text-Indent is used when you want to have a set indented space on the first line of each block of text in your markup. Here you\u2019ll learn how to use CSS to specify indents of each block of text.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/russ-ward-bqzLehtF8XE-unsplash.jpg\",\"width\":1000,\"height\":665,\"caption\":\"White book with yellow, red, and blue tabs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/text-indent\\\/#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\":\"How to Use Text-Indent in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; 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\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"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":"How to Use Text-Indent in CSS: A Complete Guide | Career Karma","description":"Text-Indent is used when you want to have a set indented space on the first line of each block of text in your markup. Here you\u2019ll learn how to use CSS to specify indents of each block of text.","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\/text-indent\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Text-Indent in CSS","og_description":"Text-Indent is used when you want to have a set indented space on the first line of each block of text in your markup. Here you\u2019ll learn how to use CSS to specify indents of each block of text.","og_url":"https:\/\/careerkarma.com\/blog\/text-indent\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T20:18:01+00:00","article_modified_time":"2021-01-04T13:53:35+00:00","og_image":[{"width":1000,"height":665,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/text-indent\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/text-indent\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"How to Use Text-Indent in CSS","datePublished":"2020-07-01T20:18:01+00:00","dateModified":"2021-01-04T13:53:35+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/text-indent\/"},"wordCount":127,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/text-indent\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/text-indent\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/text-indent\/","url":"https:\/\/careerkarma.com\/blog\/text-indent\/","name":"How to Use Text-Indent in CSS: A Complete Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/text-indent\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/text-indent\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","datePublished":"2020-07-01T20:18:01+00:00","dateModified":"2021-01-04T13:53:35+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Text-Indent is used when you want to have a set indented space on the first line of each block of text in your markup. Here you\u2019ll learn how to use CSS to specify indents of each block of text.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/text-indent\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/text-indent\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/text-indent\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/russ-ward-bqzLehtF8XE-unsplash.jpg","width":1000,"height":665,"caption":"White book with yellow, red, and blue tabs"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/text-indent\/#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":"How to Use Text-Indent in CSS"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; 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\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","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\/18834","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=18834"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18894"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}