如何实现文本图片两列并排布局及消除头部与主体的多余空白

问题1：实现.intro容器内文本与图片并排展示 #

当前.intro仅设置了对齐属性，未开启弹性布局，子元素默认是上下堆叠排列，按如下修改CSS即可实现两列并排效果：

.intro{
    /* 开启flex布局实现子元素横向排列 */
    display: flex;
    /* 水平方向均匀分配空白 */
    justify-content: space-around;
    /* 垂直方向居中对齐 */
    align-items: center;
    /* 可选：添加内边距避免内容贴边 */
    padding: 2rem 1rem;
    /* 可选：小屏幕下自动换行适配移动端 */
    flex-wrap: wrap;
    gap: 2rem;
}
/* 可选：给内部元素设置宽度避免排版错乱 */
.intro p {
    width: 40%;
    font-size: 1.2rem;
}
.intro img {
    max-width: 45%;
    height: auto;
}

问题2：消除header与main之间的多余空白 #

空白是浏览器给标签默认添加的外边距导致的，可通过两种方案处理：

• 方案一：全局重置默认样式，一次性清除所有标签自带的margin/padding

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

• 方案二：单独给相关元素清除默认外边距

/* 清除h4默认上下外边距 */
h4 {
    padding: 20px;
    margin: 0;
}
/* 清除导航ul默认上下外边距 */
nav ul {
    list-style-type: none;
    margin: 0;
}
/* 清除main内部第一个元素的上外边距，避免margin塌陷溢出到main外部 */
main > *:first-child {
    margin-top: 0;
}

如果还有残留空白，直接给header和main标签设置margin: 0即可。

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