html - 从 div 中删除所有填充

Question

我目前正在与响应式两列布局作斗争。问题是我可以调整 div 左侧和右侧的填充，但不能调整顶部和底部的填充。我已经尝试为 html 中的每个元素手动设置 padding-top，但没有任何效果。

此时我已经与它抗争了一个小时，所以我现在正在寻求帮助。代码在下面，我还附上了我需要的可视化示例。 (忽略纯文本的丑陋之处，在我修复它之前我不会将它放在网站本身上。)

这是 CSS。

.TwoColumnRow * {
    box-sizing: border-box;
}

.list_2Column {
    float: left;
    width: 50%;
    padding-right: 10px;
}

.list_2Column ul {
top-padding: 0px;
}

.TwoColumnRow :after {
    content: "";
    display: table;
    clear: both;
    border-collapse: collapse;
}

@media screen and (max-width: 450px) {
    .list_2Column {
        width: 100%;
    }
}

这是 HTML。

<h2>What is the Employee Wellness Program?</h2>
<p>Our Employee Wellness Program assists businesses, non-profits, and their employees to navigate workplace and personal challenges through educational and supportive counseling. Our program has a strong mental health component which can stand alone or be used with a company’s existing wellness initiative. Research shows employee wellness services can benefit organizations by:</p>

<div class="TwoColumnRow">
<div class="list_2Column" style="background-color:#ededed">
<ul>
<li>Increasing productivity
<li>Decreasing absenteeism and lost revenue
<li>Improving morale and loyalty
</ul>
  </div>
  <div class="list_2Column" style="background-color:#cccccc">
  <ul>
<li>Teaching new skills
<li>Providing resources and referrals
    </ul>
  </div>
</div>

我需要它看起来像什么:

目前的样子:

Answer 1

没有什么比top-margin:0更好的了。试试这个代码。

.list_2Column ul {
  padding-top: 0px;
  margin-top: 0;
  margin-bottom: 0;
}