{"id":1856,"date":"2010-11-18T00:01:06","date_gmt":"2010-11-18T06:01:06","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/11\/18\/what-are-margins-and-padding-in-css\/"},"modified":"2010-11-18T07:48:48","modified_gmt":"2010-11-18T13:48:48","slug":"what-are-margins-and-padding-in-css","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/11\/18\/what-are-margins-and-padding-in-css\/","title":{"rendered":"What Are Margins and Padding in CSS"},"content":{"rendered":"

\"boxmodel<\/a><\/p>\n

Have you ever notice that some websites or when you working on a blog post your text wrapping around an image and the text is right up against or overlapping the image? Ugly right? Well, there is fix for this. You can use CSS<\/a> or cascading style sheets<\/a> to fix this. When you want to wrap text around an image or you want to add space to the container, you can set the padding and margins. By default, these settings are set at 0px. To get the text off the image you can set the margin to 5px \u2013\u00a0 10px and the text will wrap nicely. You will need to try a few different settings to find the one you like the most.<\/p>\n

The Box Model<\/h2>\n

The above image is called the box model. By looking at the image, you can see everything some of the settings you can define when configure a box for content or images with CSS. When designing a box, you can set the width, height, margins, boarders, and padding. Once you do that, you have created a box.<\/p>\n

What you see in the box model is the Margin, Padding, and Boarder. In order to get the look you are looking for you have add pixels to the padding, margins, and border. In order to do this correctly you need know what each means and what they do.<\/p>\n

Padding<\/strong> \u2013 is the space between the image and the boarder. You can set each side of the padding around the image to whatever you want. Padding will go all around the the text or image giving it space between the content and the boarder.<\/p>\n

Boarders<\/strong> \u2013 is a line as wide as you want it to be around the image and padding. If you set the padding to zero pixels, the boarder would be right up against the image.<\/p>\n

Margin<\/strong> \u2013 is the space around the image on the outside of the boarder and the other elements next to the image. You can set each side differently as well. The margin is what you would use to set the distance around the image where the wrapping text will go.<\/p>\n

The Code<\/h2>\n

To add a margin you would use.<\/p>\n

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1,2,3″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true”]<\/p>\n

img {
\nmargin-top: 0px;
\nmargin-right: 10px;
\nmargin-bottom: 0px;
\nmargin-left: 0px;<\/p>\n

}<\/p>\n

[\/CSS]<\/p>\n

To add padding then would use.<\/p>\n

[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1,2,3" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true"]<\/p>\n

img {
\npadding: 10px;
\n}<\/p>\n

[\/css]<\/p>\n

Note:<\/span> Lines 9 -14 are not part of the code. There is an issue with the way the code is displaying. I am working to correct this issue. <\/strong><\/p>\n

Check out the Demo<\/a> I created. The code I used for the image wrap is\u2026<\/p>\n

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1,2,3″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true”]<\/p>\n

img {
\nmargin-top: 0px;
\nmargin-right: 10px;
\nmargin-bottom: 0px;
\nmargin-left: 0px;
\ntext-align: left;
\nfloat: left;
\nborder: 1px solid #000;<\/p>\n

padding: 10px;<\/p>\n

}<\/p>\n

[\/css]<\/p>\n

Final Thoughts<\/h2>\n

Using margins and padding is a great way to make your site look more professional. If you are not comfortable with using CSS you can use programs such as DreamWeaver<\/a> or other free web design programs to create your CSS settings. If you writing a blog post and you come across a text wrapping issue, you can use Windows LiveWriter<\/a> to resolve this issue. All you have to do is select your image, select the picture tab and click on custom margins. There you can set all sides or just one side. If you have any questions, let me know. I plan on doing more of these basic web design tutorials.<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever notice that some websites or when you working on a blog post your text wrapping around an image and the text is right up against or overlapping the image? Ugly right? Well, there is fix for this. You can use CSS or cascading style sheets to fix this. When you want to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[120,358,637,638,1484],"class_list":["post-1856","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-css","tag-html","tag-margins","tag-padding","tag-tutorials","entry","has-post-thumbnail"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pJPdG-tW","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/1856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/comments?post=1856"}],"version-history":[{"count":0,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/1856\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/media?parent=1856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/categories?post=1856"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/tags?post=1856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}