{"id":7832,"date":"2012-12-01T03:36:26","date_gmt":"2012-12-01T03:36:26","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=7832"},"modified":"2012-12-01T03:41:48","modified_gmt":"2012-12-01T03:41:48","slug":"how-to-create-a-margin-around-your-image-using-wordpress","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/how-to-create-a-margin-around-your-image-using-wordpress\/affordablewebsitestips\/tutorials","title":{"rendered":"How to create a margin around your image using WordPress"},"content":{"rendered":"<p>So you have an image that you inserted into your WordPress post, but the text is too close to the image? Follow the instructions below to create a left and right margin around around your image.<\/p>\n<h3>Create a margin around your image in WordPress<\/h3>\n<ol>\n<li>Make sure the 'Visual' tab is selected above your content field.<br \/>\n<a href=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2011\/09\/visual_tab_wordpress.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1070\" style=\"border: 1px solid black;\" title=\"visual_tab_wordpress\" src=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2011\/09\/visual_tab_wordpress.jpg\" alt=\"\" width=\"458\" height=\"117\" srcset=\"https:\/\/2slick.com\/web\/wp-content\/uploads\/2011\/09\/visual_tab_wordpress.jpg 458w, https:\/\/2slick.com\/web\/wp-content\/uploads\/2011\/09\/visual_tab_wordpress-300x76.jpg 300w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a>&nbsp;<\/li>\n<li>Click on the image.<\/li>\n<li>Click on the 'Edit Image' icon.<br \/>\n<a href=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/12\/WordPress_edit_image.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7830\" style=\"border: 1px solid black;\" title=\"WordPress_edit_image\" src=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/12\/WordPress_edit_image.jpg\" alt=\"\" width=\"289\" height=\"265\" \/><\/a>&nbsp;<\/li>\n<li>Click on the 'Advanced Settings' tab.<\/li>\n<li>Enter this markup in the 'Styles' field.<br \/>\n<!--DEVFMTCODE--><pre class=\"devcodeblock\" title=\"CSS\"><table class=\"devcodetools\"><tbody><tr><td>&nbsp;CSS&nbsp;|&nbsp;<\/td><td style=\"background-image:url('https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/img\/devformatter-copy.png');background-repeat:no-repeat;background-position:50% 50%;width:16px;height:16px;\"\/><embed id=\"ZeroClipboard1\" src=\"https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/_zclipboard.swf\" loop=\"false\" menu=\"false\" quality=\"best\" bgcolor=\"#ffffff\" width=\"16px\" height=\"16px\" align=\"middle\" allowScriptAccess=\"always\" allowFullScreen=\"false\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\" flashvars=\"id=1&width=16&height=16\" wmode=\"transparent\" \/><\/td><td>&nbsp;copy&nbsp;code&nbsp;|<\/td><td style=\"cursor:pointer\" title=\"DevFormatter Plugin\" onclick=\"devfmt_credits()\">?<\/td><td width=\"99%\">&nbsp;<\/td><\/tr><\/tbody><\/table><div class=\"devcodeoverflow\"><table class=\"devcodearea\" width=\"100%\"><tr><td class=\"devcodelines\" width=\"1%\">1<\/td><td class=\"devcodelinesarea\"><pre class=\"devcode devcodeline\"><span style=\"color: #000000; font-weight: bold;\">margin-left<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">10px<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #000000; font-weight: bold;\">margin-right<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">10px<\/span><span style=\"color: #00AA00;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div><\/pre><!--END_DEVFMTCODE--><br \/>\n<strong>Note:<\/strong> You can increase or decrease the number '10px' &nbsp;to make the left or right margin bigger or smaller.<\/li>\n<li>Click the 'Update' button.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>So you have an image that you inserted into your WordPress post, but the text is too close to the image? Follow the instructions below to create a left and right margin around around your image. Create a margin around your image in WordPress Make sure the &#8216;Visual&#8217; tab is selected above your content field. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7833,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6],"tags":[625,623,624,69],"class_list":["post-7832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wordpress","tag-css","tag-margin","tag-padding","tag-wordpress-2"],"_links":{"self":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/comments?post=7832"}],"version-history":[{"count":6,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7832\/revisions"}],"predecessor-version":[{"id":7839,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7832\/revisions\/7839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media\/7833"}],"wp:attachment":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media?parent=7832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/categories?post=7832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/tags?post=7832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}