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.

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.