Question

I have four elements each of whom’s width is set to 25%. They fill the width of the page perfectly.

I want to put a 1px gap between each one. If I do this (margin-right: 1px; for example), the last element overflows onto the next line. How can I reduce the width of each element by 1px without calculating the width in pixels in the first place?

Answer 1

I have just found a solution myself, with the help of @Lubnah in the comments.

.tab-list li {
  margin-right: -1px;
  border-left: 1px solid #fff;
}

.tab-list li:first-of-type {
  border-left: none;
  margin-right: 0px;
}