Border to margin in HTML

Question

I am new to HTML programming. Is it possible to make a border to the margin instead of the padding? I need this just for design purposes only.

Answer 1

Is it possible to make a border to the margin instead of the padding?

Yes. The closest way I can think of to achieve this effect is using the CSS background-clip property:

background-clip: padding-box;

This clips any backgrounds in the element not to be rendered in the border region, thus treating it like a margin rather than padding.

Below is an example of the difference:

div {
  border: 5px dashed #000; /* to see through border */
  background-color: #0FF; /* to show extent of background */
  padding: 5px;
  margin: 10px;
}

.adjusted {
  background-clip: padding-box; /* corrects extent of background */
}

<div>Default Border</div>
<div class="adjusted">Corrected Border</div>

In the "corrected" div, the border becomes part of the margin visually rather than part of the padding.

Answer 2

Make your padding the size your your current padding + margin, then set your margin to 0 pixels. This will have the same effect.

Answer 3

I don't think this is possible but if you want to enclose the margin within a border then there can be a workaround. Enclose the element with span and set the border for that span element as,

.inner{
  padding: 5px;
  margin: 5px;   
}

.outer{
  border: 1px solid black;
}

<div class="outer">
  <p class="inner">Hello</p>
</div>

Here is a demo