CODEWITHSUNDEEP
cssreactjs
Tachyon
Tachyon

Reputation: 2411

Border-right no respecting padding

I am currently trying to add a simple border-right to my styling. I have padding on the top of the div. The border, however, goes through the padding to the top of the div. Am I missing something when it comes to the styling?

When I replace the padding with a margin the border responds correctly but I do not want to use a margin in this situation.

Here is the styling I am currently using:

export const NavigationColumnStyled = styled.div`
  border-right: 1px solid ${({ theme }) => theme.palette.colors.secondary};
  color: ${({ theme }) => theme.typography.onSurface};
  flex: 1;
  padding-left: 25px;
  padding-top: 25px;
`;

Upvotes: 0

Views: 368

Answers (1)

Quentin
Quentin

Reputation: 944425

That is how it is supposed to work.

The content is a box inside the padding, which is a box inside the border, which is a box inside the margin.

The border extends to the edges of its box, not the content box.

See the specification:

Box model

Upvotes: 3

Related Questions