Creating space between an element and its border

by

You want padding.

Here’s a link to a site that demonstrates “margin”, “border”, and “padding” for an element. http://css-tricks.com/the-css-box-model/

However, there used to be a problem with IE’s rendering of the box model and the “rest of the world” in that IE used a different mechanism to determine “overall width”. You need to understand that if you plan on supporting IE7 (two generations old) or older.

I imagine that using the “rest of the world” way will be sufficient for your needs.

For the rest of the world (and the sake of when that link no longer works) here’s an ascii version of the same diagram:

+----------------------------+
|                            |
|          margin            |
|                            |
|   *******border**********  |
|   *                     *  |
|   *      padding        *  |
|   *                     *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *   ---ELEMENT-----   *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *                     *  |
|   ***********************  |
|                            |
|                            |
+----------------------------+

More Related Contents:

  1. what does "/" mean in css border-radius property? [duplicate]
  2. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  3. Border Gradient with Border Radius
  4. Remove white space below image [duplicate]
  5. How to remove the border highlight on an input text element
  6. How can I show only corner borders?
  7. Any way to declare a size/partial border to a box?
  8. CSS triangle custom border color
  9. Invert rounded corner in CSS?
  10. CSS Property Border-Color Not Working
  11. Control the dashed border stroke length and distance between strokes
  12. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  13. Hover effect : expand bottom border
  14. How to create multi-color border with CSS?
  15. Should I use ‘border: none’ or ‘border: 0’?
  16. Double border with different color [duplicate]
  17. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  18. Border within border CSS
  19. What is the difference between outline and border CSS properties?
  20. CSS border less than 1px [duplicate]
  21. Two color borders
  22. How to create multiple borders around existing border of circle [duplicate]
  23. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  24. Removing the image border in Chrome/IE9
  25. CSS hover border makes elements adjust slightly
  26. Can I have different colored left and top borders in CSS?
  27. text flowing out of div
  28. input type=”image” shows unwanted border in Chrome and broken link in IE7
  29. Inner border over images with CSS?
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment