问答详情
源自:7-1 7. vertical-align前后不一的行为表现_x264

2:15位置改变图片vertical-align后,图片的baseline在哪儿?文字为什么也跟着上移?谢谢

图片vertical-align:top,图片元素与靠齐图片的父元素的内容区域的顶部。视频2:15的位置,说图片实际是往下沉的,但因为所有的元素往上推的(DOM元素都是左上对齐)。

1、图片实际是往下沉的,所有元素往上推?这句话不明白。

2、可文字为什么也会跟着上移了?

3、图片的基线balseline在图片最底部,和右侧文字的基线baseline一致,图片垂直top对齐时候,图片的基线baseline没发生改变,可右侧问题的基线(默认基线对齐)怎么跑到上面去了?

谢谢



提问者:慕神6115920 2017-09-28 12:55

个回答

  • qq_会长大的幸福_4
    2018-03-27 17:02:39

    1. 是图片拥有了顶部对齐父元素顶部的属性,那么自然就会顶对齐,而文字及其他元素并没有特殊属性,所以会默认在顶部对齐,就形成了所有元素往上推

    2. 就是一条的原因

    3. 右侧是文字,它自身的基线也是相对于自身而言是没有变化,所以并不是右侧基线上去了,而是右侧元素整个上移,另外图片的基线和文字基线并没有关联,它们的baseline属性值都是相对于父级的基线的,所以两者的位置不会相互影响。

  • 可口可乐的乐
    2017-10-22 22:07:10

    首先你得知道垂直对齐会影响整个行框盒子的高度的,此时图片发生了vertical-align:top;整个时候这个行框盒子的高度相对于之前变小了.而此时的行框盒子重新定义的基线,而后面元素还是保持基线对齐的.所以看着文字是向上了.这是鄙人的理解,若有不对欢迎指正.