[CSS] border-right와 content 사이 공백 채우기 (padding)

두 문단은 전혀 다른 내용의 news이다.

그래서 두 문단을 구별해주는 선을 추가하고 싶은데

border-right의 선이랑 텍스트랑 너무 딱 붙어 있는게

꼴뵈기가 싫다.

 

이 둘 사이에 공백을 추가하고 싶다.

---

나는 일단 노란색 색상의 content 오른쪽에 border-right : 1px solid gray; 를 넣어주었음

(border-right는 1px로 설정할 예정이나, 이해를 돕기 위해 3px로 설정하였다.)

 

노란색 영역은 <li class="news_content_1">이다. 

따라서 해당 class의 css 부분에 padding 값을 채워주면 된다.

나는 오른쪽만 공백을 주고 싶은 것이므로 padding-right의 값을 주겠다.

 

.news_content_1{
    display: table-cell;
    background-color: yellow;
    vertical-align: middle;
    padding-right: 15px;
    border-right: 3px solid gray;
}

.news_content_1 의 우측에 15px만큼의 공백이 생긴 것을 확인할 수 있다.

 

근데 나는 파란색 영역과 solid가 붙어있는 것도 눈꼴 시려우므로

저것들도 떼어놓겠다.

 

yellow 영역인 .news_content_1 은 padding-right : 15px; + border-right : 3px solid gray; = 공백 18px이므로

skyblue 영역인 .news_content_2 의 padding-left 값은 18px로 지정해주겠다.

이렇게 둘의 공백이 성공적으로 생기게 되었다.

 

하지만 난 저 solid를 1px로 지정해주고 싶으므로

다시 1px로 지정해주고, .news_content_2의 padding-left값을 16px로 재지정해주겠다.

 

.news_content_1{
    display: table-cell;
    background-color: yellow;
    vertical-align: middle;
    padding-right: 15px;
    border-right: 1px solid gray;
}

.news_content_2{
    display: table-cell;
    background-color: skytblue;
    padding-left: 16px;
}

 

개인 취향인디, 선이 저렇게 얇은게 더 예쁜 것 같다.

그리고 yellow와 skyblue로 지정한 background-color도 없애주었는데

생각보다 진한 gray의 저 가운데 line이 너무 어색해서

뉴스 문단 나누는데 국룰인 lightgray 컬러로 바꾸어 주었다.

 

쫘좐

 

정말 TMI 남발하자면

난 지금 공부하러 카페 갈 때 거의 맨날 입는 스누피 맨투맨을 입고 있고,

일본 여행을 가고 싶다.