creating spacing between an element and its border

Related searches

I'm trying to create a spacing between an element and its outermost border. (EDIT: he wants to do two borders between the element proper and the outside of the box-model box. This gives him the room of using the margin, border and padding to achieve his goal). So far my searches in Google and here produced no solution to this.

I am trying to avoid using images to acheive this.

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-----   *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *                     *  |
|   ***********************  |
|                            |
|                            |
+----------------------------+

CSS and Spacing, The border-spacing property sets the distance between the borders of adjacent cells. Note: This property inherit, Inherits this property from its parent element. Play it. length length. Specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed. If one value is specified, it defines both the horizontal and vertical spacing between cells. If two values are specified, the first sets the horizontal spacing and the second sets the vertical spacing.

You can do one of 2 things. What you're coding for will determine what you use.

Padding could be added to the container (outer) element to push the element inside away from it's border.

Margin could be used on the inner element to push itself away from the container.

My experience is that if you're designing for the web, use either, checking in all browsers to make sure that your spacing is correct.

However, if you're coding for an HTML email, you should use Margin - in some applications (Outlook 2007) Padding does not work in some instances.

border-spacing, The space between an element and its outline is transparent. Outlines differ from borders in three ways: An outline is a line drawn around elements, outside the� These properties insert negative space between the margins or borders of an element and its content. See Figure 1 above for a clear illustration of the relationship between margins, borders, and padding. These properties behave in exactly the same manner as margin properties, with the following exceptions:

I ended up using the multiple css technique (here), and using border-color: transparent to create a transparent spacing between the element and its border.

CSS border-spacing property, Visual representation of CSS margins, padding, border and content. As apparent from the diagram, the padding of an element is the layer that shows how adding a border or padding on the parent element can avoid the� As apparent from the diagram, the padding of an element is the layer that extends from the outer edge of the element’s content to the inner edge of its border. This property is used to control the

You can do something like this with inset border

<div class="box"></div>

.box {
background-color: #e1309e;
border: 10px solid #6a51d2;
height: 80px;
width: 80px;
box-shadow: 0 0 0 10px #f3f5f6 inset;
box-sizing: border-box;}

Demo

CSS outline-offset property, Margins should be used to create space between to elements. Padding should be used to create space between the edge of an element and its own contents. Since we want to create space between the text and the image, placing a margin on the image is the right way to go. Using CSS classes provides another benefit, too — we can distinguish between images placed on the right and images placed on the left, and set appropriate margins on only the side that is needed.

The backgroud-clip can be used:

div {
  border: 1px dotted black;
  padding: 5px;
  background: green;
  background-clip: padding-box;
}

How to Set CSS Margins and Padding (And Cool Layout Tricks , The space between an element and its border B. The space between two elements C. The space reserved for an element Which of the following would be used to create

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Comments
  • Often times a picture added to the post will help us understand what you are trying to achieve versus what you have achieved, when discussing visual layouts.
  • @drachenstern I thought about it, but by the time I got home it was too late.
  • the padding doesnt seem to work..., using the following css there is no transperent spacing between the black color and the red border: div {background-color: black; width: 200px; height: 200px; border: 5px solid red; padding: 20px}
  • @GZaidman Then you need to nest a div inside a div. I thought you wanted spacing from the element. Background-color does not affect only the element. You were not clear on that when you first posted the question, and then I was afk. Hope this helps.
  • I read about multiple borders (here), and I think it might help solve the problem without using another div, but I dont know if it's possible to create a transparent border
  • There is no such CSS property as "multiple borders". What that article discusses is advanced CSS concepts. If you notice, it's effectively creating a wrapper element (using :before) that can do what you want. I suggest sticking to the simpler to manipulate concepts until you've built up more familiarity with more complex examples like pseudo selectors. For what it's worth, it was about five years after I first heard about :before and :after and it was still another six months or so before I really got how they worked. (I didn't have a need for them either)