Clever Geek Handbook

Border to border in HTML

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

+3


source to share


3 answers


Can I make a border with an edge instead of filling?

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

:

background-clip: padding-box;

Fixes all backgrounds to an element that should not appear in the border area, so treats it as a box, not 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>
Run codeHide result


In the "fixed" div, the border becomes part of the margin visually and not part of the padding.

0


source


Make your size the size of your current stock + margins, then set the margin to 0px. This will have the same effect.



0


source


I don't think this is possible, but if you want to nest the border into a border then a workaround might arise. Attach an element to a span and set a 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>
Run codeHide result


Here is a demo

0


source






More articles:


All Articles