html - 为什么 padding-bottom 无法向上移动元素？

Question

我正在尝试将橙色加号(屏幕右下方)向上移动，使其更靠近其他图标，就在它们的正下方。 padding-bottom 不起作用，但 padding-top 起作用。我想它上面的元素一定有很多填充，阻止它向上移动更多，但检查器工具显示它们之间有空间。

我很难知道这里发生了什么，因为我的导师编写了这段代码，因此我不明白它是如何构造的。我对 Html/Css 也很陌生，尽管 padding-bottom 到目前为止还没有让我失望。

这是构成第二个表的部分 View 代码。橙色加号图标位于最底部，在表格结束标记下方:

@model IEnumerable<JobPlacementDashboard.Models.JPOutsideNetworking>

}
<table class="table">
    <tr>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.NameSortParm')">Name</a>
        </th>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.PositionSortParm')">Position</a>
        </th>
        <th class="sort-button-style table-headers fixed ">
            <a onclick="sortPartial('@ViewBag.CompanySortParm')">Company</a>
        </th>
        <th class="sort-button-style table-headers fixed">
            <label class="network-label networkingheader">LinkedIn</label>
        </th>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.LocationSortParm')">Location</a>
        </th>
        <th class="sort-button-style table-headers fixed">
            <label class="network-label networkingheader">Email</label>
        </th>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.StackSortParm')">Stack</a>
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="text-center">
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Position)
            </td>
            <td>
                <a href="http://@Html.ExternalLink(item.CompanyURL)" target="_blank">@Html.DisplayFor(modelItem => item.Company)</a>
            </td>
            <td>
                <a href="http://@Html.ExternalLink(item.LinkedIn)" target="_blank">LinkedIn</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Location)
            </td>
            <td>
                <a href="mailto:@Html.ExternalLink(item.Contact)" target="_blank">@Html.DisplayFor(modelItem => item.Contact)</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stack)
            </td>
            <td class="font20">
                @if (User.IsInRole("Admin"))
                {
                    @Html.ActionLink(HttpUtility.HtmlDecode("&#x270E;"), "Edit", new { id = item.OutsideNetworkingID })
                    <span>|</span>
                    @Html.ActionLink(HttpUtility.HtmlDecode("&#x1F5D1;"), "Delete", new { id = item.OutsideNetworkingID })
                }
            </td>
        </tr>
    }
</table>

@if (User.IsInRole("Admin"))
{

    <div class="createnewplus">
        @Html.ActionLink(HttpUtility.HtmlDecode("&#x2b;"), "Create")
    </div>

}

这是针对加号的 Css 部分:

.createnewplus  {
font-size:30px;
font-weight:800;
margin-left:1075px;

}

margin-left 是因为它自动显示在最左边，在学生姓名下面，当它需要在其他图标下面时。

如果有人知道为什么 padding-bottom 在这种情况下不起作用，我将不胜感激。如果这是一个令人痛苦的愚蠢问题，我深表歉意；如果您需要更多详细信息才能知道发生了什么，请告诉我!

编辑:padding-bottom 目前不在 css 中，因为我把它去掉了，因为它什么都不做。

Answer 1

Padding-bottom 将在 createnewplus div 下方创建空间(填充)，因此将它之后的任何内容移动到页面下方。 createnewplus div 似乎是页面上的最后一个元素，因此这就是为什么在添加 padding-bottom 时没有任何变化。

您需要找到负责每个表格后面的填充/边距的 css。降低它会将您的图标向上移动。