Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Understanding margin and padding in CSS

Sunday, October 28th, 2012 by Servage

CSS is a powerful tool to design your website. It transforms your HTML code into beautifully styled content for your visitors pleasure. In the web world it is generally acknowledged as standard, to divide content and design, seeing the HTML a

s a semantical representation – regardless of layout. The CSS is the extra layer that transforms the HTML into a custom view. The advantage is that HTML and CSS development can be split up – which makes sense. Content developers focus on HTML, designers focus on CSS. And as long as everyone is producing standard compliant code, it should work out fine.

If you’re not sure if your code is standard compliant, then read this article.

When using CSS, most HTML elements can use a “border”, “margin” and “padding” attribute. The margin and padding decides how an element i spaced towards it’s own inner content, as well as towards outside surrounding content – and it’s own border position.

Which influences do the settings have:

  • The border setting indicates which style, how thick and what color a border should have.
  • The margin attribute indicates which distance there should be between the border and surrounding content.
  • The padding attribute indicates which distance there should be between the border and inner content of the element.
Example code:
<div id="test">Inner content</div>
#test {
  margin: 10px;
  border: 1px solid #000000;
  padding: 10px;
}
Please take a look at the illustration for this article. Starting in the middle, it shows an inside content area, a space between that content are and the border (set by padding), then comes the border, followed by a space between the border and surrounding content (set by margin).

 

Understanding margin and padding in CSS, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.