[CSS] border width 줄이기

• 아래 사이트를 만드는 과제를 하다가 배운 것
  <p> 아래에 border-bottom을 넣었는데 길이를 사진너비만큼 (전체 body의 30%) 를 주고 싶을 때,
   CSS 에서 그냥 p 태그 안에 width만 넣어서 조정해주면 됨. 
   처음엔 이게 왜 그렇지 이해 안갔음.
   이유를 찾아보다가 찾은 링크 : https://teamtreehouse.com/community/how-to-change-the-length-of-the-bottom-border
  
  
  Jonathan Chua 

  on Jul 21, 2015

  Hi Aleksandrs, The border will always be the same width and height as the element it surrounds. Since you are displaying the bottom border for your .service div, it will always be as wide as the div. The only way to make it shorter is to change the width of the div itself. If you want the orange line in your screenshot to be shorter without affecting the text above it, you can create another div below .service with a height of 0px, set the width to the desired value, and display the bottom border. Hope that makes sense!

해당 과제의 CSS

img{

width: 30%;

float: left;

margin : 1.66%;

}

p{

font-family: Raleway;

font-size: 23px;

font-weight: 800;

margin-left: 1.66%;

text-transform: uppercase;

border-bottom: solid 2px gray;

padding-bottom: 10px;

border-width: 30%;

width: 30%;

}