{"id":6881,"date":"2024-04-14T16:13:48","date_gmt":"2024-04-14T08:13:48","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6881"},"modified":"2024-04-14T16:13:48","modified_gmt":"2024-04-14T08:13:48","slug":"eliminate-gaps-between-inline-elements","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/eliminate-gaps-between-inline-elements\/","title":{"rendered":"Eliminate gaps between inline elements"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>An issue that often arises when using inline-block elements is the presence of whitespace in HTML that translates into visible gaps in the layout (similar to word spacing).<\/p>\n<p>The solution lies in removing any separation between elements within the HTML markup. It should be noted that this corrective measure might complicate the markup and pose challenges during editing.<\/p>\n<p>If you encounter design inconsistencies between your live site and exported version, there are some techniques you can try:<\/p>\n<ul>\n<li><strong>Export minified code:<\/strong> within the Designer&#8217;s export modal, utilize the keyboard shortcut [ctrl+o] to access advanced export settings.<\/li>\n<li><strong>Publish minified code:<\/strong> in the Site Settings under the Hosting tab, navigate to the Publishing Options section and deselect Beautify HTML.<\/li>\n<li><strong>Utilize floats:<\/strong> consider using the float property instead. For centering elements, enclose them in a Div Block with Display: Inline Block.<\/li>\n<li><strong>Apply negative margin:<\/strong> counteract any extra space caused by inline-block elements by adding a slight negative left\/right margin.<\/li>\n<li><strong>Adjust font size to zero:<\/strong> set the parent element&#8217;s font size to 0px and explicitly define the inline-block element&#8217;s font size.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Remove whitespace between inline-block elements.","protected":false},"author":2,"featured_media":5320,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6881","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6881"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6881\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5322"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}