1.5. *** Border, padding, border-style, border-width, border-color, border-style *** - Khoảng cách giữa các element

 


Demo : https://www.lenlop123.com/2020/09/15-border-padding-border-style-border.html



 



 




<style>
  p.zero {padding: 10px;border: 5px solid green;}
  p.first {
      padding: 10px;
      border-style: solid;
      border-width: 2px;
      border-color: blue;
  }
  p.second {
      padding: 10px;    
      border-style: solid;
      border-width: 2px;
      border-color: #FF6600;
  }
  p.third {
      padding: 10px;
      border-style: solid;
      border-width: 2px;
      border-color: rgb(0, 153, 0);
  }
  p.none {border-style: none;}
  p.dotted {border-style: dotted;}
  p.dashed {border-style: dashed;}
  p.double {border-style: double;}
  p.groove {border-style: groove;}
  p.ridge {border-style: ridge;}
  p.inset {border-style: inset;}
  p.outset {border-style: outset;}
  p.hidden {border-style: hidden;}
</style>

<p class="zero">This is an example of a solid border.</p>
<p class="first">Border color has been created using <strong>color name.</strong></p>
<p class="second">Border color has been created using <strong>Hex values.</strong></p>
<p class="third">Border color has been created using <strong>RGB values.</strong> </p>
<p class="none">This paragraph has no border.</p>
<p class="dotted">This is a dotted border.</p>
<p class="dashed">This is a dashed border.</p>
<p class="double">This is a double border.</p>
<p class="groove">This is a grooved border.</p>
<p class="ridge">This is a ridged border.</p>
<p class="inset">This is an inset border.</p>
<p class="outset">This is an outset border.</p>
<p class="hidden">This is a hidden border.</p>


























Nhận xét