Adding padding-inline-start: 0px;

[Benjamin Lebron]

Hey everyone! So, I've been using this CSS reset on some client and personal projects and I've noticed that my layouts constantly get out of shape because of user agent styling on Microsoft Edge (haven't tested this on any other browser). This user agent styling applies a padding-inline-start of 40px. I was constantly being bamboozled by this issue and it would be helpful to add

padding-inline-start: 0px;

to somewhere in the reset

Let me know what you think!

Best,
Benjamin Lebron

[Andy Bell]

Is that padding applied to lists? I'm actually a fan of the default padding on lists tbh

[Benjamin Lebron]

It is in microsoft edge and becuase its set in pixels it often mis-aligns my layouts on mobile

[Benjamin Lebron]

Let me share a screenshot real quick

Before I reset inline-padding

After I reset the padding-inline-start

[Benjamin Lebron]

If you approve, I can submit a pull-request adding this in for Microsoft-edge but I also believe Safari and Firefox does this as well

[Andy Bell]

So are these elements in a list then? Not really too hot on the idea of user-agent specific stuff in this reset if I'm honest

[Benjamin Lebron]

Here's my code:

<li>
<article class="snippet">
<img src="{{ guides.data.image }}" alt="{{ guides.data.title }}" class="snippet_image">
<h3 class="snippet_title">{{ guides.data.title }}</h3>
<p class="snippet_body">{{ guides.data.description }}</p>
<p class="snippet_body"> Last updated <span>{{ guides.data.date }}</span></p>
<div class='btn-container'><a href="{{ guides.url }}" class="btn btn--primary">Continue Reading</a></div>
</article>
</li>

Here the issue is that the entire list item is pushed to the right therefore reseting the inline start would allow people to choose their own padding

[Benjamin Lebron]

Although I might be in error because I set my own padding to this element and the user-agent still added in the 40px. Also there is already a reset in padding in the reset but for some reason it does not annul the inline-start

[Andy Bell]

Hmmm yeh it sounds to me like there could be an issue there local to your project. I'll close this for now, but I hope you find the resolution to it!

[Benjamin Lebron]

Ok cool, I'll do my best to debug. Maybe it's because I'm on an older version of MS Edge? I just updated though so maybe not? I'm still very inexperienced so as I progress in my coding journey I suppose It'll be fixed. Thanks for your time Andy! And your amazing content on your blog (you have no idea how it's helped me).

Best,
Ben

[Andy Bell]

Thanks, Ben. That's great to hear!