この問題を解決するためのマージントップ無効

2つの空のネストされたブロック要素、内側ブロックがマージントップ属性が設けられており、要素の親が下側を解決する決して特徴がある場合、インナーブロック誘拐親要素のその後マージントッププロパティは(マージン来るとき-top)は親要素を上書きする渡されます。

HTML

<div class="job-container">
    <div class="job-item">
        <div class="job-item-title">创意总监</div>
        <div class="job-item-content">
            <p>你是一位创业家,是创新者,是熟捻客户需求的管理人。你擅文案,懂策略,通晓什么是互动设计的本质,能在头脑风暴过程中捕捉到伟大的
                idea……</p>

            <p>如果以上你都符合,你将在草帽大有所为。我们为你提供最佳的品牌客户,以及最优秀的创意团队支持。</p>

            <p>资质要求:</p>
            <p>◆ 5年以上从业经验</p>
            <p>◆ 数字媒体和营销行业的深入理解,洞察技术发展趋势</p>
            <p>◆ 出色的品牌策略能力及整合传播技巧</p>
            <p>◆ 非凡的提案能力和沟通技巧,大型品牌成功案例实操经验</p>
            <p>◆ 成熟的团队领导力,精于与客户建立关系</p>
            <p>◆ 优秀的团队领导能力</p>

            <p>我们希望你充满激情,拥有一颗渴望成名的心。</p>
            <p>我们欢迎来自世界各地的创意家!</p>
            <p>请提交您的技术案例,包括详细的简历。</p>
        </div>
    </div>
    
</div>

CSS

.job-container {
    width: 1000px;
    height: auto;
    margin:0 auto;
    margin-top: 60px;
    margin-bottom: 120px;

    .job-item {
        overflow: hidden; /* 解决margin-top无效问题 */
        box-shadow:0px 2px 24px 0px rgba(0, 0, 0, 0.1);
        .job-item-title {
            width: 200px;
            height: 52px;
            background:rgba(238,238,238,1);
            text-align: center;
            line-height: 52px;
            font-size: 18px;
            margin:0 auto;
            margin-top: 40px;
            color:#222222;
        }

        .job-item-content {
            width: 867px;
            margin:0 auto;
            margin-top:31px;
            margin-bottom: 59px;
            font-size: 14px;
            color: #222222;
            p {
                line-height: 32px;
            }
        }
    }
    .job-item:nth-child(n+2) {
        margin-top: 30px;
    }
}

おすすめ

転載: www.cnblogs.com/jiqing9006/p/12164933.html