What Are Margins and Padding in CSS

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

3 Flares Filament.io 3 Flares ×

boxmodel - CSS Margins & Padding

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 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 –  10px and the text will wrap nicely. You will need to try a few different settings to find the one you like the most.

The Box Model

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.

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.

Padding – 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.

Boarders – 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.

Margin – 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.

The Code

To add a margin you would use.

[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”]

img {
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;

}

[/CSS]

To add padding then would use.

[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"]

img {
padding: 10px;
}

[/css]

Note: 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.

Check out the Demo I created. The code I used for the image wrap is…

[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”]

img {
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
text-align: left;
float: left;
border: 1px solid #000;

padding: 10px;

}

[/css]

Final Thoughts

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 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 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.

EvolutionaryDesigns.net runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

About James

James spends most of his free time using social media and loves to teach others about design, web development, CSS, SEO, and social media. He is addicted to Wordpress, social media, and technology. You can reach him on his, personal website, Do not forget to follow him on Twitter @element321

Comments

  1. Thanks, I need that. Often times I forget which is which and there I go again screwing up with my design. Believe it or not, I am no tech savvy and this reminder is a breath of fresh air.

    Hope all is well

  2. Thats super cool ! I need to learn a lot of CSS as its pretty easy to tweak web designs once you get the basics . Looking forward for more CSS stuff 😛

  3. Nice and simple explanation. You might want to mention shorthand as well; it’s a real time saver.

    • Hi Joseph,
      Thanks for stopping by and commenting.

      I haven’t really used CSS shorthand. But its something I will look into more.

      • Oh, shorthand is super easy! For margin and padding, you go in a clockwise direction starting from the top. So,

        margin: 10px 5px 20px 15px;

        Is equivalent to
        margin-top: 10px;
        margin-right: 5px;
        margin-bottom: 20px;
        margin-left: 15px;

        The same can be used for padding.

        • O thanks. I do that all the time. I never new it was called short hand. I learned CSS that way on my own but when I started taken classes we could not use short hand. We were always told you had to define all the properties. I guess it was to teach those that didn’t know CSS.

  4. well explained specially for newbies

  5. Very well explained.
    I’ve always been confused between both, hopefully not anymore 🙂

Trackbacks

  1. What Are Margins and Padding in CSS…

    Margins and Padding is used to style element boxes including images in CSS. Use margins to adjust the space between the wrapping text and the image….

  2. What Are Margins and Padding in CSS | Evolutionary Designs…

    Margins and Padding is used to style element boxes including images in CSS. Use margins to adjust the space between the wrapping text and the image….

  3. Story added…

    Your story was featured in Featured in MMO Social Network! Here is the link to vote it up and promote it: http://www.mmosocialnetwork.com/Tutorials/What_Are_Margins_and_Padding_in_CSS

  4. What Are Margins and Padding in CSS | Evolutionary Designs…

    Margins and Padding is used to style element boxes including images in CSS. Use margins to adjust the space between the wrapping text and the image….

  5. RT @Element321: What Are Margins and Padding in #CSS http://t.co/YGpySvk via @element321

Leave a Reply to Ajinkya Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Flares Twitter 3 Facebook 0 Pin It Share 0 Buffer 0 Email -- Filament.io 3 Flares ×
%d bloggers like this: