当我改变了p标签的属性为行内块元素，但为什么p标签距离外部盒子顶部有一块距离

行内块元素与图片位置是怎么样的，

img

img


当我改变了p标签的属性为行内块元素，图片后面有空间，是在图片后面，但为什么p标签距离外部盒子顶部有一块距离，为什么会下来呢
效果如下

img

图片默认与文字的基线对齐，这是和css 中 vertical - align 属性应用有关，请看我总结的这篇博客！
https://blog.csdn.net/qq_57421630/article/details/122923301
有帮助的话采纳一下哦！，回答的您的上个问题还么采纳呢。

img

.right_topbox p中添加vertical-align: top;即可实现p标签紧贴顶部（如果有默认margin也需要设置一下margin: 0;）

.right_topbox p{
    line-height: 25px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

文字和图片的对齐方式不一样。添加一个vertical-align: top;

你可以打开控制台看看，然后试试 margin： 0;

img

父级标签没有设置为行标签。

  • 因为你的图片有一个高度，父元素的高度被最大的元素高度决定，不过你已经手动指定了高度
  • inline-block作用是使得该元素能够被设置宽高值，但是你没有用到这个特点，你现在已经设置了父元素高度，最简单的方式可以直接指定高度为height:100%;

图片style里添加 vertical-align: middle 试试

vertical-align: top；设置顶部对齐

1 P标签默认的margin、padding 去掉了吗 ？
2 是否是因为行高影响到了？（line-height）
3 可以设置一下box-sizing:border-box

p 元素会自动在其前后创建一些空白，浏览器会自动添加这些空间。
可以参考下html元素介绍，https://www.w3school.com.cn/tags/tag_p.asp
如果必须使用p元素，可以添加样式margin:0;来强制修改样式。