{"id":19028,"date":"2020-07-06T14:33:27","date_gmt":"2020-07-06T21:33:27","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19028"},"modified":"2020-12-29T13:06:49","modified_gmt":"2020-12-29T21:06:49","slug":"html-indent","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-indent\/","title":{"rendered":"HTML Indent"},"content":{"rendered":"\n<p>The HTML inline-styling property, known as the text-indent property, indents each paragraph 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 shows how to create text-indent in pixels (px):&nbsp;<\/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 HTML&lt;\/title&gt;\n   &lt;\/head&gt;\n&lt;body&gt;\n       &lt;p style=&quot;text-indent: 25px;&quot;&gt;\n           Baseball ipsum dolor sit amet passed ball outs, sweep stretch bleeder triple play. Left fielder count fair swing cork balk ball. Full count southpaw reliever lineup crooked number fastball second base. Perfect game outfielder rally force dodgers right fielder dead ball era right field. Pickoff world series peanuts batting average cup of coffee foul inside robbed. Bleeder club appeal first base sidearm mustard steal line drive inning.\n       &lt;\/p&gt;\n         \n          \n       &lt;p style=&quot;text-indent: 25px;&quot;&gt;\n           Sidearm bullpen base on balls national pastime losses reliever umpire pull dribbler. Manager 4-bagger tag national pastime pennant good eye relief pitcher. Save on-base percentage fan ejection baseball card skipper reliever strikeout bench. On-base percentage fenway contact win warning track, ball rhubarb center field. Starting pitcher hey batter out cellar cardinals basehit double switch. Play hey batter tigers sidearm in the hole shortstop no decision.\n \n       &lt;\/p&gt;\n       &lt;p style=&quot;text-indent: 25px;&quot;&gt;\n \n           Off-speed petey pinch hitter astroturf walk off no decision count full count wrigley. Hack cheese helmet tossed gap run red sox. Fall classic in the hole ejection rotation rally center field shift. Manager pickoff knuckleball assist pinch runner pitchout stretch. Steal hardball extra innings alley rubber off-speed flyout third base. Baseline butcher boy umpire left field hitter, catcher win right field can of corn.\n          \n       &lt;\/p&gt;\n   &lt;\/body&gt;<\/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.&nbsp;<br><\/p>\n\n\n\n<p>This property is the same as the CSS property of the same name. The only difference between this and the CSS version is where the selector rule is located. The CSS text-indent property is located with the other CSS rules in the style tag in the HTML head or CSS external stylesheet. The HTML equivalent is written as an inline style in your actual markup.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"The HTML inline-styling property, known as the text-indent property, indents each paragraph of text just as you would indent the first line of a paragraph when writing a paper.&nbsp; The code editor shows how to create text-indent in pixels (px):&nbsp; &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; \/&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt; &lt;title&gt;Text Indent&hellip;","protected":false},"author":77,"featured_media":13833,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-19028","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":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML Indent: A Step-By-Step 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 HTML in combination with inline-styling to specify indents for 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\/html-indent\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Indent\" \/>\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 HTML in combination with inline-styling to specify indents for each block of text.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-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-06T21:33:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T21:06:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"573\" \/>\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\/html-indent\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"HTML Indent\",\"datePublished\":\"2020-07-06T21:33:27+00:00\",\"dateModified\":\"2020-12-29T21:06:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/\"},\"wordCount\":146,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-indent\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/html-indent\/\",\"name\":\"HTML Indent: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg\",\"datePublished\":\"2020-07-06T21:33:27+00:00\",\"dateModified\":\"2020-12-29T21:06:49+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 HTML in combination with inline-styling to specify indents for each block of text.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-indent\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg\",\"width\":1020,\"height\":573,\"caption\":\"HTML Ma\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-indent\/#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\":\"HTML Indent\"}]},{\"@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\/#\/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":"HTML Indent: A Step-By-Step 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 HTML in combination with inline-styling to specify indents for 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\/html-indent\/","og_locale":"en_US","og_type":"article","og_title":"HTML Indent","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 HTML in combination with inline-styling to specify indents for each block of text.","og_url":"https:\/\/careerkarma.com\/blog\/html-indent\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-06T21:33:27+00:00","article_modified_time":"2020-12-29T21:06:49+00:00","og_image":[{"width":1020,"height":573,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.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\/html-indent\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-indent\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"HTML Indent","datePublished":"2020-07-06T21:33:27+00:00","dateModified":"2020-12-29T21:06:49+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-indent\/"},"wordCount":146,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-indent\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-indent\/","url":"https:\/\/careerkarma.com\/blog\/html-indent\/","name":"HTML Indent: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg","datePublished":"2020-07-06T21:33:27+00:00","dateModified":"2020-12-29T21:06:49+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 HTML in combination with inline-styling to specify indents for each block of text.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-indent\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-indent\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-indent\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/code-coder-coding-computer-270404.jpg","width":1020,"height":573,"caption":"HTML Ma"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-indent\/#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":"HTML Indent"}]},{"@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\/#\/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\/19028","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=19028"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/13833"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}