html - 如何强制分隔线的位置，并将 Logo 放置在特定位置？

Question

这是我现在拥有的:

我正在努力尝试将我的分隔线和我的书向上移动 - 可能是 10 像素。

我尝试使用开发工具检查它们并调整 padding 和 margin，但似乎没有任何效果。

我现在很好奇，也很无能。我不确定为什么它会在那条橙色虚线处阻止我。我需要一点插入。

有人可以请告诉我我在这里做错了什么吗？

这是我的实时结果:Fiddle

Answer 1

要将所有内容移动到穿孔线下方，请更改 .tl-left 选择器的 margin-top 属性。

.tl-left{
    margin-top: -35px;
}

要仅移动书籍图像和垂直线，请执行以下操作:

#mp-book{
    width: 76px;
    margin-top:-10px;
}

.vertical-line {
    border-left:3px solid silver;
    height:100px;
    text-align: center;
    width:2px;
    margin-left:48px;
    margin-right:25px;
    margin-top:-10px;
}

将 margin-top:-10px 添加到您的 #mp-book 和 .vertical-line 选择器。

https://jsfiddle.net/e9L60rfr/23/