Why won't padding-bottom work to move an element up? - html

Question

I'm trying to move the orange plus sign (lower right of screen) up so that it's closer to the other icons, directly below them. Padding-bottom does not work, but padding-top does. I figured the element above it must have a lot of padding that kept it from being able to move up more, but the inspector tool shows there's space between them.
It's hard for me to know what's going on here, as my instructors wrote this code and I don't therefore understand exactly how it's constructed. I'm also quite new to Html/Css, though padding-bottom hasn't failed me thus far.
Here is the partial view code that makes up the second table. The orange plus icon is at the very bottom, underneath the table end tag:
#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>
#Html.DisplayFor(modelItem => item.Company)
</td>
<td>
LinkedIn
</td>
<td>
#Html.DisplayFor(modelItem => item.Location)
</td>
<td>
#Html.DisplayFor(modelItem => item.Contact)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stack)
</td>
<td class="font20">
#if (User.IsInRole("Admin"))
{
#Html.ActionLink(HttpUtility.HtmlDecode("✎"), "Edit", new { id = item.OutsideNetworkingID })
<span>|</span>
#Html.ActionLink(HttpUtility.HtmlDecode("🗑"), "Delete", new { id = item.OutsideNetworkingID })
}
</td>
</tr>
}
</table>
#if (User.IsInRole("Admin"))
{
<div class="createnewplus">
#Html.ActionLink(HttpUtility.HtmlDecode("+"), "Create")
</div>
}
Here is the part of the Css that targets the plus:
.createnewplus {
font-size:30px;
font-weight:800;
margin-left:1075px;
}
The margin-left is because it automatically displays on the far left, under student name, when it needs to be under the other icons.
If anyone has an idea as to why padding-bottom doesn't work in this case, I'd be very appreciative. I apologize if this is a painfully dumb question; and if you would need more details to be able to tell what's going on, please let me know!
Edit: padding-bottom is not in the css currently because I took it out, as it was doing nothing.

Answer 1

Padding-bottom will create space (padding) below the createnewplus div, therefore moving any content that comes after it farther down the page. It appears that the createnewplus div is the last element on the page, so that is why nothing is changing when you add padding-bottom.
You need to find the css that is responsible for the padding/margin following each table. Lowering it will move your icon up.