[Vuejs]-How to force VueJS not to produce a "*, ::after, ::before" element in css

0đź‘Ť

âś…

box-sizing: border-box; is super nice in that you don’t have to think if that you have a width set to the element, and let’s say you add padding or a border, it “grows internally” so it wont break your layout. This is a wanted and useful in beviour in many situations. If you want to learn exactly why I could post a better scenario explaining? To get to the point 🙂

You could do either of these

1)
Throw out Vuetify and keep using border-box: content-box;

2) (recommended)
Change the rest of the app to use box-sizing: border-box;. This is the option in what I belive would be the recommendation from most developers. That is why it’s soo widely used in the community. Depending on the scale of your app but changing to border-box: box-sizing; and adjusting the width and border-box: content-box; on the elements that need it.

👤Dejan.S

Leave a comment