Detailed explanation of line and vertical-align examples in css

The formatting sequence of inline elements: font-size-->em box-->content area-->inline box-->place the inline box according to the baseline-->determine the height of the line box

Related concepts:
leading (line spacing): refers to the lead bar filled between two lines of text, equal to line-height and font The difference between -size, half of the leading is added above the text, and the other half of the leading is added below the text, only used for non-replaced elements.

emBox: The em box indicates the distance between baselines when there is no line spacing. The boundaries between characters are not specified. The actual glyph may be longer than its em box. Tall or shorter.

font-size ：Determines the height of the em box (em box) of a given font, but there is no guarantee that the actual displayed characters will be this size. The specific correspondence between the font-size attribute and the actual font size is determined by the font designer.

Baseline: The line upon which most letters "sit" and below which descenders extend is not the lower edge of the Chinese characters, but the lower edge of the English letter "x".

Content area (content area): Non-replacement elements are boxes composed of em boxes strung together, indirectly determined by font-size ;Replacement element: that is, the inherent height of the element plus possible margins and boxes.

Inline box (inline box): Virtual rectangular box, cannot be displayed, the size is the content area plus leading. For non-replaced elements, it is equal to the line-height value; for replaced elements, it is equal to the height of the content area. Several elements within the same line can have different line heights and inline box heights.

Line box (line box): The smallest box that contains the highest and lowest points of all inline boxes in the line, the line box The height is only related to the line height of the element in this line, and has no direct relationship with line-height, and has nothing to do with the height (height) of the parent element . Inline boxes are aligned vertically within the line based on the value of their vertical-align property.

Anonymous text: refers to all strings that are not contained in inline elements.

line-height: refers to the distance between the baselines of text lines, which determines how much each element box increases or decreases. The default is 1.2 times the font size of the element itself.

When the line-height value is inherited from the parent element, it inherits the value calculated on the parent element, not the value calculated on the child element (em, etc.). If it is a scaling factor (a pure numeric value without units), the scaling factor is inherited, not the calculated value. The product of the scaling factor and the font-size of the child element is eventually calculated.

Figure 1:

Figure 2: Line in css

Figure 3: OK Line box height

Replacement element
The margins and borders of the replacement element will affect the inline box of the element, which in turn affects the height of the line box .
Elements whose content is not controlled by the CSS visual formatting model, such as , , , <select>, <object>, the tags act as placeholders , the actual content is not in the document and is called a replacement element. The browser displays these elements based on their tag type and attributes. For example, the content of the img element is usually replaced by the image specified by its src attribute. Replacement elements usually have intrinsic dimensions: an intrinsic width, an intrinsic height and an intrinsic ratio. For example, a bitmap has an inherent width and height specified in absolute units, and thus an inherent width-to-height ratio. On the other hand, other documents may not have inherent dimensions, such as a blank HTML document. <br>The CSS rendering model does not consider the rendering of replaced element content. These replacement elements are rendered independently of CSS. Object, video, textarea, and input are also replacement elements, and audio and canvas are replacement elements in certain situations. Objects inserted using the CSS content property are anonymous replacement elements. </p> </div> <p><strong>Non-replaced elements</strong></p> <p>All other elements except replaced elements are non-replaced elements. The actual content is in the document flow, and the visual formatting model of CSS is responsible for the non-replaced elements. render. <br>The margins and borders of non-replaced elements will not affect the height of the inline box of line elements. </p> <p><strong>vertical-align: </strong>Vertical alignment, only applies to inline elements, replacement elements and table cells, and cannot be inherited. <br> The default value is baseline, which aligns the baseline of the in-line element with the baseline of the line; the text is aligned according to the baseline. If a vertically aligned element has no baseline, such as an image, form input element, or other replacement element, <strong> align the bottom edge of the element</strong> to the baseline of its parent element. </p> <p style="text-align: center">     <img src="https://img.php.cn/upload/article/000/000/001/57293ccae2928d6c6f7ea9436d990f90-3.png" alt="">   </p> <p> There is space below that line for the descenders you find on letters like f, j, p and q. Repair method: set the vertical-align attribute value of the image or change display:block; or modify the font-size/line-height of the parent element to make the height of the inline box smaller than the image. In the extreme case of the parent element's font-size:0;, the centerline and baseline will coincide. <br> Bottom: Align the bottom of the element’s inline box with the bottom of the line box. <br>　middle: Align the center line of the inline element box with a point 0.25em above the baseline, which is also equal to the distance from the baseline being half the height of the lowercase letter x (i.e. 0.5ex). The midpoint of the x character is not the absolute center line of the content area, because the x character will sink somewhat. <br> Percentage: <strong>Calculated</strong> relative to the <strong></strong>line-height<strong></strong> of the element. The function of line-height of inline replaceable elements is to help calculate vertical-align. <br> Specific length value: Raise or lower an element by a specified distance relative to the baseline of the parent element. Text aligned vertically does not cover the text of other lines; it only affects the line height of the current line so that it is large enough to contain the top of the highest inline box and the bottom of the lowest inline box. </p> <p><strong>Inline block: inline-block</strong>, the inline block element will be placed in the line as a replacement element, that is, the bottom of the inline block is placed on the baseline of the text line by default. For ie6/ie7, {display:inline; zoom:1;...} must be used to take effect. Usually used for horizontal menu lists or unequal height list elements to be arranged neatly. However, the space between the li tags will be treated as an inline element and a 4px blank will be displayed on the page. You can eliminate the blank space by passing the parent element font-size:0 and the child element font-size:12px; For ie6/ie7/safari, word-spacing and letter-spacing need to be used to adjust. </p> <p><img src="https://img.php.cn/upload/article/000/000/001/5a22f0187e7baaa6ecff1c74b5adbe42-4.png" alt=""></p> <p>#Inline blocks are aligned to the baseline by default, but there are special regulations for determining the baseline. The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. So the layout shown below will appear, which can be fixed by changing vertical-align:top;. </p> <p><img src="https://img.php.cn/upload/article/000/000/001/5a22f0187e7baaa6ecff1c74b5adbe42-5.png" alt="">##</p><p>The above is the detailed content of Detailed explanation of line and vertical-align examples in css. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Detailed explanation of the box model in CSS" href="http://m.php.cn/faq/368062.html">Detailed explanation of the box model in CSS</a></span><span>Next article：<a class="dBlack" title="Detailed explanation of the box model in CSS" href="http://m.php.cn/faq/368064.html">Detailed explanation of the box model in CSS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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>