Html 为什么h1和按钮未对齐

我注意到了一些非常奇怪的事情，我似乎无法对齐h1和按钮html元素。 我已经移除了边框和填充物，但似乎仍然存在一致的错位。我不确定发生了什么，有人能解释一下为什么会发生这种行为吗？我附上了最终结果的照片：

钮扣{
边际：0px；
填充：0px；
显示：内联块；
高度：30px；
宽度：100px；
背景：浅蓝色；
垂直对齐：文本顶部；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
h1{
边际：0px；
填充：0px；
显示：内联块；
高度：30px；
宽度：100px；
背景：浅蓝色；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
div{
背景：红色；
}
头
头

使用

垂直对齐：顶部而不是
垂直对齐：文本顶部因为
垂直对齐：文本顶部仅影响文本。并且有一个默认的
边框宽度：2px按钮，如果不需要，请删除


按钮{
边际：0px；
填充：0px；
显示：内联块；
高度：30px；
宽度：100px；
背景：浅蓝色；
垂直对齐：顶部；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
h1{
边际：0px；
填充：0px；
显示：内联块；
高度：30px；
宽度：100px；
背景：浅蓝色；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
div{
背景：红色；
}

头
头
如果您想将h1标签和按钮放在一起，那么这里就是您的解决方案。



文件
钮扣{
利润上限：-4px；
左边距：-4px；
填充：0px；
显示：内联块；
高度：30px；
宽度：100px；
背景：浅蓝色；
垂直对齐：文本顶部；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
h1{
边际：0px；
填充：0px；
显示：内联块；
高度：30px；
宽度：100px；
背景：浅蓝色；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
div{
背景：红色；
}
头
头
使用此代码就可以了
钮扣{

             margin-top: 1px;
            padding: 0px;
            display: inline-block;
            height: 30px;
            width: 100px;
            background: lightblue;
            vertical-align: top;
            font-family: Arial;
            font-size: 20px;
            font-style: normal;
            font-weight: normal;
    }

    h1 {
            margin: 0px;
            margin-top: 2px;
            margin-left: 4px;
            margin-bottom: 3px;
            padding-top: 3px;
            padding-left: 23px;
            display: inline-block;
            height: 24px;
            width: 70px;
            background: lightblue;
            font-family: Arial;
            font-size: 20px;
            font-style: normal;
            font-weight: normal;  
    }

    div {
        background:red;
    }
</style>

页边距顶部：1px；
填充：0px；
显示：内联块；
高度：30px；
宽度：100px；
背景：浅蓝色；
垂直对齐：顶部；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
h1{
边际：0px；
边缘顶部：2倍；
左边距：4倍；
利润底部：3倍；
垫面：3件；
左侧填充：23px；
显示：内联块；
高度：24px；
宽度：70px；
背景：浅蓝色；
字体系列：Arial；
字体大小：20px；
字体风格：普通；
字体大小：正常；
}
div{
背景：红色；
}
将display:flex添加到div中您应该使用类来组织内容，尤其是在内容重复的地方。。添加对齐项目：居中；显示：内联flex；到容器div并从其他容器中删除显示
             margin-top: 1px;
            padding: 0px;
            display: inline-block;
            height: 30px;
            width: 100px;
            background: lightblue;
            vertical-align: top;
            font-family: Arial;
            font-size: 20px;
            font-style: normal;
            font-weight: normal;
    }

    h1 {
            margin: 0px;
            margin-top: 2px;
            margin-left: 4px;
            margin-bottom: 3px;
            padding-top: 3px;
            padding-left: 23px;
            display: inline-block;
            height: 24px;
            width: 70px;
            background: lightblue;
            font-family: Arial;
            font-size: 20px;
            font-style: normal;
            font-weight: normal;  
    }

    div {
        background:red;
    }
</style>