[BUG] Html Widget is adding unrequested padding when rendering

[gabrielaraujoz]

Describe the bug:

When using Html widget with any text, it will add an extra 8px horizontal padding, making it misaligned with other Text widgets when used in a Column/Row. Example widget tree configuration:

Row(
  children: [
    if (icon != null) ...[
      ImageWidget(
        ...
      ),
      const SizedBox(width: Dimens.base),
    ],
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (title != null)
            Text(
              title!.toUpperCase(),
              style: Theme.of(context).txBodySmall.copyWith(
                    color:
                        Theme.of(context).highContrastColor,
                  ),
            ),
          HtmlWrapper(
            htmlText: text,
            textStyle: Theme.of(context).txBodySmall,
            boldTextStyle: Theme.of(context).txBodySmallHe,
          ),
        ],
      ),
    ),
  ],
),

HTML to reproduce the issue:

<b>HTML Widget</b> with extra spacing, misaligning it from the text above

Html widget configuration:

final txBodyStyle = Theme.of(context).txBody;
return Html(
      data: htmlText,
      style: {
        'h1': Style.fromTextStyle(Theme.of(context).txTitle1He),
        'h2': Style.fromTextStyle(Theme.of(context).txTitle2He),
        'h3': Style.fromTextStyle(Theme.of(context).txTitle3He),
        'h4': Style.fromTextStyle(Theme.of(context).txTitle4),
        'h5': Style.fromTextStyle(Theme.of(context).txTitle5),
        'body': Style.fromTextStyle(textStyle ?? txBodyStyle),
        'p': Style.fromTextStyle(textStyle ?? txBodyStyle),
        'b': Style.fromTextStyle(
          boldTextStyle ?? ReveloTheme.of(context).txBodyHe,
        ),
        'small': Style.fromTextStyle(ReveloTheme.of(context).txBodySmall),
      },
    );

Expected behavior:

Screenshot taken using a Text Widget to illustrate the expected alignment

Screenshots:

Device details and Flutter/Dart/flutter_html versions:

iOS Simulator, iPhone SE 1st generation Flutter 3.3.8 flutter_html: 3.0.0-alpha.6

Additional info:

This can be fixed by adding a left padding to the other elements in the column with 8px, but I believe the Html should not have an intrinsic padding that cannot be switched off.

A picture of a cute animal (not mandatory but encouraged)

[erickok]

This is by design, to follow web standards. You can set a body margin to zero.

Html(
  ...
  style: {
    "body": Style(margin: EdgeInsets.zero),
  },
)

[gabrielaraujoz]

This is by design, to follow web standards. You can set a body margin to zero.

Html(
  ...
  style: {
    "body": Style(margin: EdgeInsets.zero),
  },
)

Thanks! I tried it out and it worked, you're a genius!

[TinhHuynh]

It should be like this?

Html(
  ...
  style: {
    "body": Style(margin: Margins.zero),
  },
)

But when I tried the solution, it doesn't work.

Html(
      data: state.loaded?.content ?? '',
      style: {
        'html': Style(
            padding: EdgeInsets.zero,
            margin: Margins.zero,
            color: ColorName.gray3,
            fontWeight: FontWeight.w600,
            lineHeight: LineHeight.em(1.3),
            fontFamily: FontFamily.pingFang,
            fontSize: FontSize.medium),
      },
    );

[TinhHuynh]

Ah, I added body": Style(margin: Margins.zero to style, and now it worked. Sorry for misunderstood.

Html(
      data: state.loaded?.content ?? '',
      style: {
        'body': Style(margin: Margins.zero, padding: EdgeInsets.zero),
        'html': Style(
            padding: EdgeInsets.zero,
            margin: Margins.zero,
            color: ColorName.gray3,
            fontWeight: FontWeight.w600,
            lineHeight: LineHeight.em(1.3),
            fontFamily: FontFamily.pingFang,
            fontSize: FontSize.medium),
      },
    );