The v-toolbar component features default padding of 24px on the left and right
each in the desktop version. Unfortunately, this padding cannot be overridden.
I attempted to utilize Vuetify's spacing helpers (pa-0, ma-0), but they only end up shifting the logo beneath the padding as shown in the image. I also experimented with CSS classes like padding-left: 0 and padding: 0, but the padding persisted. Through DevTools, I discovered that the class used is "v-toolbar__content." In the <style></style>
section, I tried implementing padding:0 and padding-left:0
, yet nothing changed.
<v-toolbar>
<v-toolbar-title class="pa-0">
<span>
<v-avatar size="40px" tile>
<img src="https://cdn.pixabay.com/photo/2016/08/25/07/30/red-1618916_960_720.png" />
<h1>Title</h1>
</v-avatar>
</span>
</v-toolbar-title>
</v-toolbar>
Thus, when applying class="pa-0" or class="pl-0," or attempting to override the padding of the "v-toolbar__content" class, I anticipate the padding to vanish, but it remains unchanged. View an example in sandbox.io editor here. https://i.sstatic.net/vJLJA.png