html - 为什么 padding-bottom 不能向上移动元素？

问题描述

我正在尝试将橙色加号（屏幕右下方）向上移动，使其更靠近其他图标，位于它们的正下方。Padding-bottom 不起作用，但 padding-top 可以。我认为它上面的元素必须有很多填充，使其无法向上移动，但检查器工具显示它们之间存在空间。

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

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

@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;

}

左边距是因为当它需要位于其他图标下方时，它会自动显示在最左边的学生姓名下方。

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

编辑： padding-bottom 目前不在 css 中，因为我把它拿出来了，因为它什么也没做。

标签： htmlcssasp.net-mvcrazor

html - 为什么 padding-bottom 不能向上移动元素？

问题描述

解决方案

推荐阅读