{"id":14138,"date":"2013-03-11T19:42:47","date_gmt":"2013-03-12T02:42:47","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14138"},"modified":"2022-05-31T07:23:54","modified_gmt":"2022-05-31T14:23:54","slug":"word-spacing","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-spacing\/","title":{"rendered":"word-spacing"},"content":{"rendered":"\n<p>The <code>word-spacing<\/code> property is similar to <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\"><code>letter-spacing<\/code><\/a>, though naturally its use governs the amount of space between the words in a piece of text, not the individual characters.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  word-spacing: .75em;\n}<\/code><\/pre>\n\n\n\n<p><code>word-spacing<\/code> can receive three different values:<\/p>\n\n\n\n<ol><li>the \u201cnormal\u201d keyword, which resets the default spacing<\/li><li>length values using any CSS units (most commonly <i>px<\/i>, <i>em<\/i>, <i>rem<\/i>)<\/li><li>the \u201cinherit\u201d keyword, which applies the <code>word-spacing<\/code> of the parent element<\/li><\/ol>\n\n\n\n<p>Best practice at this time would be to use <code>em<\/code>. Font size can be adjusted, so using pixels for this could cause problems at the spacing between words wouldn&#8217;t scale as their size did. <code>rem<\/code> is great usually, but browser support is lower and in this use case it&#8217;s probably best the spacing is relevant directly to the words it is being applied to, not the root.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"post-20435 media-20435\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/almanac_word-spacing-example.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>It is important to note that \u201cword\u201d in this context actually refers a singular piece of inline content\u2014which means that <code>word-spacing<\/code> affects <code>inline-block<\/code> elements as well as <code>inline<\/code> elements. In this example, several such elements are spaced by setting the <code>word-spacing<\/code> of their parent container:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ApypzB\" src=\"\/\/codepen.io\/anon\/embed\/ApypzB?height=350&amp;theme-id=1&amp;slug-hash=ApypzB&amp;default-tab=css,result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ApypzB\" title=\"CodePen Embed ApypzB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"worth-noting\">Worth noting&#8230;<\/h3>\n\n\n<ul><li>The <code>word-spacing<\/code> property is animatable with <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition\/\">CSS Transitions<\/a>.<\/li><li>While use of the \u201cpercentage\u201d value to determine spacing is permitted as per the spec, it can yield unpredictable results \u2014 often simply no effect at all.<\/li><li>Setting white-space to zero is one of the ways to <a href=\"https:\/\/css-tricks.com\/fighting-the-space-between-inline-block-elements\/\">fight against the space<\/a> between inline block elements.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/ireade\/caniuse-embed\/public\/caniuse-embed.min.js\"><\/script>\n<p class=\"ciu_embed\" data-feature=\"mdn-css__properties__word-spacing\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/word-spacing\" rel=\"noopener\">Mozilla Docs<\/a><\/li><li><a href=\"http:\/\/www.quirksmode.org\/m\/table.html#t26\" rel=\"noopener\">Mobile browser support table on QuirksMode<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The word-spacing property is similar to letter-spacing, though naturally its use governs the amount of space between the words in a piece of text, not the individual characters. word-spacing can receive three different values: the \u201cnormal\u201d keyword, which resets the default spacing length values using any CSS units (most commonly px, em, rem) the \u201cinherit\u201d [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13955,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14063,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/","url_meta":{"origin":14138,"position":0},"title":"letter-spacing","date":"March 12, 2013","format":false,"excerpt":"The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), absolute values (px) and the normal property, which resets to the font's default. Using font-relative values is recommended, so that the letter-spacing\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257413,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-justify\/","url_meta":{"origin":14138,"position":1},"title":"text-justify","date":"August 8, 2017","format":false,"excerpt":"The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when text-align is set to the justify value. p { text-align: justify; text-justify: inter-word; } Values inter-word: Specifies that text is justified by adjusting the spacing between words,\u2026","rel":"","context":"In \"text-justify\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14190,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/","url_meta":{"origin":14138,"position":2},"title":"::first-line","date":"September 6, 2011","format":false,"excerpt":"The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":294643,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-spacing\/","url_meta":{"origin":14138,"position":3},"title":"border-spacing","date":"August 19, 2019","format":false,"excerpt":"The\u00a0border-spacing\u00a0property in CSS controls how far apart cells are in a\u00a0<table>\u00a0element (or an element that is made to be table-like via\u00a0display: table;). It takes any of the\u00a0lengths of CSS.\u00a0 Notably, it only has any effect at all if the table is using the default\u00a0border-collapse: separate;\u00a0and has no effect at all\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":282706,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-margin\/","url_meta":{"origin":14138,"position":4},"title":"scroll-margin","date":"February 13, 2019","format":false,"excerpt":"scroll-margin is part of the CSS Scroll Snap Module. Scroll snapping refers to \"locking\" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/fingers-snap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376820,"url":"https:\/\/css-tricks.com\/defining-global-settings\/","url_meta":{"origin":14138,"position":5},"title":"Defining Global Settings","date":"January 31, 2023","format":false,"excerpt":"Let's take what we learned about the theme.json structure in WordPress block themes and apply it to two main sections of the file: settings and styles. These arrays are the \u201ctop level\u201d for configuring WordPress features and the theme\u2019s CSS output.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14138"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14138"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14138\/revisions"}],"predecessor-version":[{"id":366145,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14138\/revisions\/366145"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13955"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14138"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}