                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之vertical-align

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

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

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

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

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

谢谢

慕神6115920

2017-09-28

源自：CSS深入理解之vertical-align 7-1

关注问题我要回答

1620

操作

收起

2 回答

qq_会长大的幸福_4
2018-03-27

是图片拥有了顶部对齐父元素顶部的属性，那么自然就会顶对齐，而文字及其他元素并没有特殊属性，所以会默认在顶部对齐，就形成了所有元素往上推
就是一条的原因
右侧是文字，它自身的基线也是相对于自身而言是没有变化，所以并不是右侧基线上去了，而是右侧元素整个上移，另外图片的基线和文字基线并没有关联，它们的baseline属性值都是相对于父级的基线的，所以两者的位置不会相互影响。