What is the correct way to style the component?

Question

Vue.js

There is a universal component <Avatar/> and I need to indent the right 10px.
I have 2 options:
1) Through style <Avatar :style="margin-right: 10px"/> - in this option, the code turns out to be dirty
2) Through a wrapper <div class="container-avatar"><Avatar/></div>- in this option, an extra html element
What are the best practices for this?

Answer 1

Through a wrapper <div class="container-avatar"><Avatar/></div>- in this version, an extra html element

What's stopping you from adding a class directly to a component instance? Quite a working option .