Border bottom increasing with padding

Padding means the space between the element border and element content. Therefore by increasing padding, the inner length and height of the border or any element will increase as well

some element {
padding: 10px;
}

This will make space INSIDE the element and thus increasing its width and height. But if you dont want it to happen and if u just want to move the border either horizontally or vertically..use MARGINS instead. Margin means the space AROUND the element...therefore when u do something like this

some element {
margin: 10px;
}

this will actually make 10px of space on each side OUTSIDE the element.... Hope you understand, mark my answer as the best if i managed to help u