[html] 수평선과 html, css로 코딩하는 올바른 방법

블록 뒤에 수평선을 그려야하는데 세 가지 방법이 있습니다.

1) 클래스를 정의하고 h_lineCSS 기능을 추가 하십시오.

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) hr태그 사용

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) after의사 클래스 처럼 사용

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

어떤 방법이 가장 실용적입니까?

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

html5boilerplate 가 수행 하는 방법은 다음과 같습니다 .

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

시맨틱 마크 업을 사용하고 <hr/>.

원하는 테두리가 아니라면 패딩, 테두리 및 여백의 조합을 사용하여 원하는 경계를 얻을 수 있습니다.

HTML5에서 <hr>태그는 주제별 구분을 정의합니다. HTML 4.01에서
<hr>태그는 수평 규칙을 나타냅니다.

따라서 정의 후에는 <hr>

정말로 주제별 휴식을 원한다면 반드시 <hr>태그를 사용하십시오 .

디자인 라인 만 원한다면 css 클래스와 같은 것을 사용할 수 있습니다.

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

다음과 같이 사용하십시오.

<div class="block_1 hline-bottom">Cheese</div>

선과 같은 긴 대시를 원했기 때문에 이것을 사용했습니다.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}

<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>

내 간단한 해결책은 CSS로 hr 스타일을 지정하여 상단 및 하단 여백, 테두리 0, 높이 1 픽셀 및 대비되는 배경색을 갖도록하는 것입니다. 스타일을 직접 설정하거나 클래스를 정의하여 수행 할 수 있습니다. 예를 들면 다음과 같습니다.

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}