Strange excess space on the top of list element

[Seamate]

Describe the bug:

ol and ul elements have this extra space at the top that won't go away with margin and padding set to 0.

HTML to reproduce the issue:

<h4>2.<strong> Unlimited Franchise or Universal Adult Suffrage</strong></h4>
<p>In this type of suffrage, all qualified adults (men and women) are allowed to vote and be voted for in an election. This type of franchise is the most popular and universally acknowledged. It is constitutional and democratic.</p>
<p>However, there are conditions to be met under unlimited franchise before an individual can vote or be voted for. These include:</p>
<ol>
    <li><strong>Age</strong>: For example in Nigeria, Britain and USA, a person cannot vote unless he/she is eighteen years. Those of German and India are twenty and twenty-one years respectively.</li>
    <li><strong>Citizenship:</strong> Only the legal citizen of a country can vote and be voted for in most democratic processes.</li>
    <li><strong>Registration:</strong> Only those that are properly registered and issued with voters cards can vote in elections.</li>
    <li><strong>Sanity:</strong> A mentally derailed person cannot be allowed to vote at election despite the fact that it is a universal/unlimited franchise.</li>
    <li><strong>Bankruptcy</strong>: those declared bankrupt cannot vote or be voted for.</li>
</ol>

Html widget configuration:

Html(
                                  customRenders: {
                                    customTagMatcher(): CustomRender.widget(
                                        widget: (RenderContext context, _) {
                                      return Math.tex(
                                        context.tree.element!.text,
                                        textStyle: TextStyle(
                                          fontSize: 25,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      );

                                      // Your conditions with the element.
                                      // finally return your own custom widget:
                                    }),
                                  },
                                  tagsList: Html.tags..add('tex'),
                                  data: lessonContent,
                                  style: {
                                    'h1, h2, h3, h4, h5, h6': Style(
                                      fontSize: FontSize(16),
                                      padding: EdgeInsets.all(10),
                                    ),
                                    'div': Style(
                                      margin: Margins.only(top: -10),
                                    ),
                                    'h1': Style(display: Display.none),
                                    'h2': Style(
                                      backgroundColor:
                                          Color.fromARGB(255, 186, 169, 242),
                                    ),
                                    'h3': Style(
                                      backgroundColor:
                                          Color.fromARGB(255, 169, 208, 242),
                                    ),
                                    'h4': Style(
                                      backgroundColor:
                                          Color.fromARGB(255, 242, 207, 169),
                                    ),
                                    'h5': Style(
                                      backgroundColor:
                                          Color.fromARGB(255, 182, 181, 179),
                                    ),
                                    'h6': Style(
                                      backgroundColor:
                                          Color.fromARGB(255, 187, 236, 206),
                                    ),
                                    'p': Style(
                                      fontSize: FontSize(16),
                                      // margin: EdgeInsets.only(bottom: -200),
                                    ),
                                    'li': Style(
                                      padding: EdgeInsets.only(top:0),
                                      fontSize: FontSize(16),
                                    ),
                                    'ol, ul,': Style(
                                      margin: Margins.only(top:0),
                                      padding: EdgeInsets.only(top:0),
                                      fontSize: FontSize(16),
                                      listStylePosition:
                                          ListStylePosition.outside,
                                    ),
                                    'td, tr': Style(
                                        padding: EdgeInsets.all(10),
                                        border: Border.all(
                                          width: 1,
                                          color: Colors.deepPurple,
                                        )),
                                  }),

Expected behavior:

I expect that on setting the margin and padding properties to 0, the extra space will be gone and the text will be displayed properly. Check the screenshot below to see the white space at the top of the list.

Screenshots:

Device details and Flutter/Dart/flutter_html versions:

Flutter 3.7.8 • channel stable • https://github.com/flutter/flutter.git Framework • revision 90c64ed42b (9 weeks ago) • 2023-03-21 11:27:08 -0500 Engine • revision 9aa7816315 Tools • Dart 2.19.5 • DevTools 2.20.1 Flutter Html any

[Sub6Resources]

This may be resolved on the latest master branch (coming in 3.0.0-beta.2 soon). I'll take a look though

[Seamate]

Great! I'll be expecting a fix soon. Thanks for your response.

[Sub6Resources]

3.0.0-beta.2 is released. Please let me know if your issue is not actually resolved.

[Seamate]

The extra space is gone now as can be seen in the screenshot. Thanks a lot for being very responsive and supportive. However, there seems to be no way to reduce the left margin of lists. The space is much.

[Sub6Resources]

You can adjust the left padding by setting the inline-start (or right or left) padding on the ol or ul either using css or using the styles option.

[Seamate]

You can adjust the left padding by setting the inline-start (or right or left) padding on the ol or ul either using css or using the styles option.

This worked perfectly. Issues resolved 100%. Thank you!