콘텐츠가 포함된 인라인 블록 요소가 수직으로 정렬되지 않는 이유는 무엇입니까?

인라인 블록 요소와 콘텐츠의 수직 정렬

질문:

콘텐츠를 포함하는 인라인 블록 요소가 왜 정렬이 잘못된 것 같다 수직으로?

설명:

기본적으로 인라인 블록 요소는 기준선 규칙을 사용하여 수직으로 정렬됩니다. 이는 요소의 기준선(대부분의 문자가 놓이는 줄)이 상위 컨테이너의 기준선과 정렬된다는 의미입니다.

그러나 제공된 CSS에서와 같이 이러한 요소 중 하나에 콘텐츠가 포함되어 있지 않으면 브라우저는 기본적으로 하단 여백 가장자리에 요소를 정렬합니다. 이러한 불일치로 인해 수직 정렬이 잘못된 것으로 인식될 수 있습니다.

해결책:

올바른 수직 정렬을 보장하려면 수직 정렬 속성을 위쪽으로 설정하세요. 이렇게 하면 기본 기준선 규칙을 사용하는 대신 요소가 상위 항목의 상단에 정렬됩니다.

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

참고:

두 인라인 블록 요소 모두에 같은 수의 텍스트 줄을 사용하는 경우 두 번째 요소에 텍스트를 추가하면 정렬 문제가 해결되는 것처럼 보일 수 있습니다. 그러나 이는 두 번째 요소가 기준선을 설정하도록 강제하기 때문입니다. 행 수가 변경되면 수직 정렬 속성을 적용하지 않으면 정렬이 다시 불일치하게 됩니다.

위 내용은 콘텐츠가 포함된 인라인 블록 요소가 수직으로 정렬되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!