Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Border in box-model #16

Open
zumm opened this issue Jan 14, 2023 · 5 comments
Open

Border in box-model #16

zumm opened this issue Jan 14, 2023 · 5 comments

Comments

@zumm
Copy link

zumm commented Jan 14, 2023

Border affects element sizes. Should it be in box-model? At least having option to choice will be nice, like in abandoned rational-order package.

@kutsan
Copy link
Owner

kutsan commented Jan 14, 2023

I thought about that before but these changes would separate outline which is not included in CSS Box Model. In my opinion, it makes sense to group them together because they're similar. Should we include outline in box-model group as well, what do you think?

Moving border and outline to box-model group also makes it their current appearance group really small. Most of the time they would consist only opacity and background properties.

Although it's named as box-model, I'm actually thinking them as general sizing properties. Border also effects the element size like you mentioned but most of the time we do not use it that way. So, maybe naming is at fault? We can simply rename "box-model" group to "sizing"?

It would really appreciated if you have any thoughts about this @wimhendrikx.

@zumm
Copy link
Author

zumm commented Jan 14, 2023

I don't think outline should be moved too since it doesn't affect element sizes. So border and outline aren't so similar from this point of view.

@chriswilty
Copy link

All else seems to make sense to me, just border stood out as in the wrong place, so I'd vote for this one too.

@kutsan
Copy link
Owner

kutsan commented Jan 28, 2024

Do you guys think border should be between margin and padding or after or before margin/padding pair?

Between margin and padding:

.box {
  isolation: isolate;

  width: 200px;
  height: 100px;
  margin: 20px;
  border: 2px solid #3498db;
  padding: 15px;

  border-radius: 10px;
  box-shadow: 3px 3px 5px rgb(0 0 0 / 10%);
}

After margin and padding:

.box {
  isolation: isolate;

  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 15px;
  border: 2px solid #3498db;

  border-radius: 10px;
  box-shadow: 3px 3px 5px rgb(0 0 0 / 10%);
}

@axten
Copy link

axten commented Apr 2, 2024

I would vote for "after margin"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants