为何Flex布局header内的Flex布局ul存在左内边距与上边距？需实现左对齐垂直导航栏

浏览器默认会给<ul>元素加上上边距和左内边距，这就是导航内容没法完全靠左对齐的核心原因。只需在.header2 ul的CSS规则里添加margin: 0; padding: 0;，就能移除这些默认样式，让导航内容彻底靠左对齐。

修改后的完整代码如下：

HTML代码 #

<section class="header2">
    <ul>
        <li> <a> Home </a> </li>
        <li> <a> Explore </a> </li>
        <li> <a> About </a> </li>
        <li> <a> Contact</a> </li>
    </ul>
</section>

CSS代码 #

.header2 {
    display: flex;
    margin: 0;
    padding: 0;
}
.header2 ul {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    background-color: grey; 
    height: 100%; 
    width: fit-content;
    align-items: flex-start;
    /* 移除ul默认边距 */
    margin: 0;
    padding: 0;
}

如果需要让导航链接也完全贴合左侧，还可以给<li>和<a>标签添加margin: 0; padding: 0;，这一步可根据实际需求调整。

内容的提问来源于stack exchange，提问作者True Champion