{"id":7046,"date":"2021-07-26T10:23:55","date_gmt":"2021-07-26T10:23:55","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=7046"},"modified":"2021-07-26T10:26:18","modified_gmt":"2021-07-26T10:26:18","slug":"css-border-spacing-property","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/","title":{"rendered":"CSS border-spacing property"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This CSS property is used to set the distance between the borders of the adjacent cells in the table. It applies only when the border-collapse property is set to seprate. There will not be any space between the borders is the border-collapse is set to collapse.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It can be defined as one or two values for determining the vertical and horizontal spacing. When only one values is specified, then it sets both horizontal and vertical spacing. When we use the two value syntax, then the first one is used to set the horizontal spacing, and the second value sets the vertical spacing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>syntax:- <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">border-spacing: length | initian | inherit;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>property values:-<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>length:- <\/strong>This value sets the distance between the borders of the adjacent table cell in px, cm, pt, etc. Negative values are not allowed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>initial:- <\/strong>It sets the property to its default value.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>inherit:- <\/strong>It inherit the property from its parent element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:-<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using the value of the border-spacing property. The border- collapse property is set to separate, and value of the border-spacing is set to 45px. <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/shashank969\/3043bf905886046d17982ab56387d8a8.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property.png\" alt=\"CSS border-spacing property\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example:-<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using two values of teh border spacing property. The border-collapse property is set to separate, and the value of teh border-spacing is set to 20pt 1em. The first value, i.e., 20pt sets the horizontal spacing, and the 1 em set the vertical spacing.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/shashank969\/45565912ef2800345d0ca46818d1f3e7.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property2.png\" alt=\"CSS border-spacing property\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This CSS property is used to set the distance between the borders of the adjacent cells in the table. It [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5309],"tags":[5591,5134,886],"class_list":["post-7046","post","type-post","status-publish","format-standard","hentry","category-css","tag-borer-spacing","tag-css","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS border-spacing property - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS border-spacing property - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"This CSS property is used to set the distance between the borders of the adjacent cells in the table. It [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-26T10:23:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-26T10:26:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property.png\" \/>\n<meta name=\"author\" content=\"shashank K\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shashank K\" \/>\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:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/\"},\"author\":{\"name\":\"shashank K\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/c88b513657ea9e9a6cd8a9b3a3bff6f3\"},\"headline\":\"CSS border-spacing property\",\"datePublished\":\"2021-07-26T10:23:55+00:00\",\"dateModified\":\"2021-07-26T10:26:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/\"},\"wordCount\":230,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/static.javatpoint.com\\\/csspages\\\/images\\\/css-border-spacing-property.png\",\"keywords\":[\"Borer-spacing\",\"css\",\"Web Development\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/\",\"name\":\"CSS border-spacing property - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/static.javatpoint.com\\\/csspages\\\/images\\\/css-border-spacing-property.png\",\"datePublished\":\"2021-07-26T10:23:55+00:00\",\"dateModified\":\"2021-07-26T10:26:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/c88b513657ea9e9a6cd8a9b3a3bff6f3\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#primaryimage\",\"url\":\"https:\\\/\\\/static.javatpoint.com\\\/csspages\\\/images\\\/css-border-spacing-property.png\",\"contentUrl\":\"https:\\\/\\\/static.javatpoint.com\\\/csspages\\\/images\\\/css-border-spacing-property.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-border-spacing-property\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS border-spacing property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/c88b513657ea9e9a6cd8a9b3a3bff6f3\",\"name\":\"shashank K\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g\",\"caption\":\"shashank K\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/shashank\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS border-spacing property - scmGalaxy","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:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/","og_locale":"en_US","og_type":"article","og_title":"CSS border-spacing property - scmGalaxy","og_description":"This CSS property is used to set the distance between the borders of the adjacent cells in the table. It [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/","og_site_name":"scmGalaxy","article_published_time":"2021-07-26T10:23:55+00:00","article_modified_time":"2021-07-26T10:26:18+00:00","og_image":[{"url":"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property.png","type":"","width":"","height":""}],"author":"shashank K","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shashank K","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/"},"author":{"name":"shashank K","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/c88b513657ea9e9a6cd8a9b3a3bff6f3"},"headline":"CSS border-spacing property","datePublished":"2021-07-26T10:23:55+00:00","dateModified":"2021-07-26T10:26:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/"},"wordCount":230,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#primaryimage"},"thumbnailUrl":"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property.png","keywords":["Borer-spacing","css","Web Development"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/","name":"CSS border-spacing property - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#primaryimage"},"thumbnailUrl":"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property.png","datePublished":"2021-07-26T10:23:55+00:00","dateModified":"2021-07-26T10:26:18+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/c88b513657ea9e9a6cd8a9b3a3bff6f3"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#primaryimage","url":"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property.png","contentUrl":"https:\/\/static.javatpoint.com\/csspages\/images\/css-border-spacing-property.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-border-spacing-property\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"CSS border-spacing property"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/c88b513657ea9e9a6cd8a9b3a3bff6f3","name":"shashank K","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g","caption":"shashank K"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/shashank\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=7046"}],"version-history":[{"count":2,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7046\/revisions"}],"predecessor-version":[{"id":7049,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7046\/revisions\/7049"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=7046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=7046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}