CSS의 선 및 수직 정렬 예에 대한 자세한 설명

인라인 요소의 형식 지정 순서: 글꼴 크기-->em 상자-->콘텐츠 영역-->인라인 상자-->기준선을 기준으로 인라인 상자 배치-->라인 상자의 높이 결정

관련 개념 :
leading(줄 간격): 텍스트의 두 줄 사이를 채우는 리드 바를 의미하며, 이는 행 높이와 글꼴 크기의 차이와 동일합니다. 텍스트 위에 나머지 절반은 텍스트 아래에 추가되며 대체되지 않은 요소에만 사용됩니다.

emBox: em 상자는 줄 간격 없이 기준선 사이의 거리를 나타냅니다. 문자 사이의 경계는 지정되지 않습니다. 실제 문자 모양은 em 상자보다 크거나 짧을 수 있습니다.

font-size : 주어진 글꼴에 대한 em 상자의 높이를 결정하지만 실제 표시되는 문자가 이 크기일 것이라는 보장은 없습니다. 글꼴 크기 속성과 실제 글꼴 크기 간의 특정 대응 관계는 글꼴 디자이너에 의해 결정됩니다.

기준선: 대부분의 문자가 "앉는" 선과 그 아래로 디센더가 확장되는 선은 한자의 아래쪽 가장자리가 아니라 영문자 "x"의 아래쪽 가장자리입니다.

콘텐츠 영역(콘텐츠 영역): 비대체 요소는 글꼴 크기에 의해 간접적으로 결정되는 em 상자로 구성된 상자입니다. 요소의 고유 높이와 가능한 여백 및 상자가 포함됩니다.

인라인 상자(inline box): 가상 직사각형 상자, 표시할 수 없으며 크기는 콘텐츠 영역에 행간을 더한 값입니다. 대체되지 않은 요소의 경우 줄 높이 값과 같고, 대체된 요소의 경우 콘텐츠 영역의 높이와 같습니다. 동일한 줄 내의 여러 요소는 줄 높이와 인라인 상자 높이가 다를 수 있습니다.

라인 상자(line box): 라인의 모든 인라인 상자 중 가장 높은 점과 가장 낮은 점을 포함하는 가장 작은 상자입니다. 이 줄의 요소 및 line- 높이는 직접적인 관계가 없으며 상위 요소의 높이와도 관련이 없습니다. 인라인 상자는 수직 정렬 속성 값에 따라 줄 내에서 수직으로 정렬됩니다.

익명 텍스트: 는 인라인 요소에 포함되지 않은 모든 문자열을 나타냅니다.

line-height: 각 요소 상자의 증가 또는 감소 정도를 결정하는 텍스트 줄의 기준선 사이의 거리를 나타냅니다. 기본값은 요소 자체의 글꼴 크기의 1.2배입니다.

line-height 값이 상위 요소에서 상속되면 하위 요소(em 등)에서 계산된 값이 아닌 상위 요소에서 계산된 값을 상속받습니다. 배율 인수(단위가 없는 순수한 숫자 값)인 경우 배율 인수와 하위 요소의 글꼴 크기의 곱이 계산되는 것이 아니라 배율 인수가 상속됩니다.

그림 1:

그림 2: CSS의 줄

그림 3: 줄 상자 높이 결정

요소 교체
여백과 테두리 교체된 요소가 영향을 미칩니다. 해당 요소는 라인 상자의 높이에 영향을 미치는 인라인 상자입니다.
, , , <select>, <object>와 같이 콘텐츠가 CSS 시각적 형식 지정 모델에 의해 제어되지 않는 요소는 태그가 자리 표시자 역할을 합니다. 문서에 없는 요소를 대체 요소라고 합니다. 브라우저는 태그 유형 및 속성을 기반으로 이러한 요소를 표시합니다. 예를 들어 img 요소의 내용은 일반적으로 src 속성에 지정된 이미지로 대체됩니다. 교체 요소에는 일반적으로 고유 너비, 고유 높이 및 고유 비율과 같은 고유 치수가 있습니다. 예를 들어, 비트맵에는 절대 단위로 지정된 고유한 너비와 높이가 있으므로 고유한 너비 대 높이 비율이 있습니다. 반면에, 빈 HTML 문서와 같은 다른 문서에는 고유한 크기가 없을 수도 있습니다. <br>CSS 렌더링 모델은 대체된 요소 콘텐츠의 렌더링을 고려하지 않습니다. 이러한 대체 요소는 CSS와 독립적으로 렌더링됩니다. 개체, 비디오, 텍스트 영역 및 입력도 대체 요소이며 오디오 및 캔버스는 특정 상황에서 대체 요소입니다. CSS 콘텐츠 속성을 사용하여 삽입된 개체는 익명 대체 요소입니다. </p> </div> <p><strong>교체되지 않은 요소</strong></p> <p>교체된 요소를 제외한 다른 모든 요소는 대체되지 않은 요소입니다. 실제 콘텐츠는 문서 흐름에 있으며 CSS의 시각적 서식 모델은 대체되지 않은 요소의 렌더링을 담당합니다. <br>대체되지 않은 요소의 여백과 테두리는 선 요소의 인라인 상자 높이에 영향을 주지 않습니다. </p> <p><strong>vertical-align: </strong>세로 정렬, 인라인 요소, 대체 요소 및 테이블 셀에만 적용 가능하며 상속될 수 없습니다. <br>　기본값은 인라인 요소의 기준선을 줄의 기준선에 맞춰 정렬하는 기준선입니다. 이미지, 양식 입력 요소 또는 기타 대체 요소와 같이 수직으로 정렬된 요소에 기준선이 없는 경우 <strong> 요소의 아래쪽 가장자리 </strong>를 상위 요소의 기준선과 정렬합니다. </p> <p style="text-align: center">                                                    해당 줄 아래에는 찾을 수 있는 디센더를 위한 공간이 있습니다. f, j, p 및 q와 같은 문자 수정 방법: 이미지의 수직 정렬 속성 값을 설정하거나 디스플레이:블록을 변경하거나 상위 요소의 글꼴 크기/줄 높이를 수정하여 인라인 높이를 만듭니다. 이미지보다 상자가 작습니다. 부모 요소의 글꼴 크기:0;의 극단적인 경우에는 중심선과 기준선이 일치합니다. <img src="https://img.php.cn/upload/article/000/000/001/57293ccae2928d6c6f7ea9436d990f90-3.png" alt="">　하단: 요소의 인라인 상자 하단을 라인 상자 하단과 정렬합니다. </p>　중간: 인라인 요소 상자의 중심선을 기준선 위 0.25em 지점에 정렬합니다. 이는 기준선으로부터의 거리가 소문자 x 높이의 절반(예: 0.5ex)인 것과 같습니다. x 문자의 중간점은 컨텐츠 영역의 절대 중심선이 아닙니다. x 문자가 다소 가라앉기 때문입니다. <p>　퍼센트: 요소의 <br><br>줄 높이<br><strong>를 기준으로 </strong>계산<strong>합니다. 인라인 교체 가능 요소의 줄 높이 기능은 수직 정렬 계산을 돕는 것입니다. </strong>특정 길이 값: 상위 요소의 기준선을 기준으로 지정된 거리만큼 요소를 올리거나 내립니다. 수직으로 정렬된 텍스트는 다른 줄의 텍스트를 덮지 않습니다. 현재 줄의 줄 높이에만 영향을 미치므로 가장 높은 인라인 상자의 위쪽과 가장 낮은 인라인 상자의 아래쪽을 포함할 수 있을 만큼 커집니다. <strong></strong><br>Inline-block: inline-block</p>, 인라인 블록 요소는 대체 요소로 줄에 배치됩니다. 즉, 인라인 블록의 하단은 기본적으로 텍스트 줄의 기준선에 배치됩니다. ie6/ie7의 경우 {display:inline; Zoom:1;...}을 사용해야 적용됩니다. 일반적으로 가로 메뉴 목록이나 높이가 다른 목록 요소를 깔끔하게 정렬하는 데 사용됩니다. 그러나 li 태그 사이의 공백은 인라인 요소로 처리되며 4px 공백이 페이지에 표시됩니다. 상위 요소인 글꼴 크기:0과 하위 요소인 글꼴 크기를 전달하여 공백을 제거할 수 있습니다. 12px; ie6/ie7/safari의 경우 단어 간격과 문자 간격을 사용하여 조정해야 합니다. <p><strong></strong></p> <p>인라인 블록은 기본적으로 기준선 정렬이 되어 있지만 기준선 결정에는 특별한 규정이 있습니다. 그만큼 '인라인 블록'의 기준선은 블록의 마지막 줄 상자의 기준선입니다. 유입 라인 상자가 없거나 '오버플로'된 경우를 제외하고 정상적인 흐름 속성에 'visible' 이외의 계산된 값이 있습니다. 이 경우 기준선은 아래쪽 여백 가장자리이므로 아래에 표시된 레이아웃이 나타나며, 이는 Vertical-align:top;을 변경하여 수정할 수 있습니다. <img src="https://img.php.cn/upload/article/000/000/001/5a22f0187e7baaa6ecff1c74b5adbe42-4.png" alt=""></p> <p></p><p>위 내용은 CSS의 선 및 수직 정렬 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="CSS의 상자 모델에 대한 자세한 설명" href="https://m.php.cn/ko/faq/368062.html">CSS의 상자 모델에 대한 자세한 설명</a></span><span>다음 기사：<a class="dBlack" title="CSS의 상자 모델에 대한 자세한 설명" href="https://m.php.cn/ko/faq/368064.html">CSS의 상자 모델에 대한 자세한 설명</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>