Update message slightly uneven

[Presskopp]

After updating a plugin there's a message "Plugin updated successfully. More details." The margin is 1px off. It has a top margin of 6px and a bottom margin of 7px. Because it's only 1px, it's hard to show.

The values are calculated by

.notice p, .notice-title, div.updated p, div.error p, .form-table td .notice p {
    margin: 0.5em 0;

The computed values are 6.5px. I assume one time it gets rounded down, on time up.

[Presskopp]

this is Chrome 144.0.7559.110 on Windows 11, btw. - but the issue has been around for some time.

[sabernhardt]

The discrepancy on update-core.php is in the line-height, not the margin.

• Paragraph line-height is 1.5, or 19.5 pixels.
• The 'More details' button has a normal line-height from the default user agent stylesheet.
• The icon inside the button has a line-height of 1, equal to 20 pixels.

If the button inherits the line-height, that can move the triangle icon up one pixel (and reduce the space below the paragraph by one pixel).

.js-update-details-toggle {
    line-height: inherit;
}

Trac ticket: Fix - Update message slightly uneven

Applied fix based on this comment:- https://core.trac.wordpress.org/ticket/64588#comment:2

Fixes #64588

Changes the margin from 6px 0 to 7px 0 for .notice p and related selectors to ensure equal top and bottom margins, avoiding rounding issues that occur with 0.5em (which computes to 6.5px and can round differently).

Fixes a 1px vertical spacing inconsistency in admin update notices caused by subpixel rounding of 0.5em margins.

Changes the margin for .notice p (and related selectors) from 0.5em 0 (~6.5px) to 7px 0 to ensure consistent top and bottom spacing across browsers.

Fixes #64588

Trac ticket: https://core.trac.wordpress.org/ticket/64588

Testing Instructions

Go to Dashboard → Updates

Trigger any admin notice (e.g., plugin update available)

Inspect the notice message text spacing

Confirm that:

Top and bottom spacing of the paragraph text inside notices is visually equal

No 1px vertical misalignment is visible

Compare before/after patch if possible

Why this approach is taken as discussed in ticket https://core.trac.wordpress.org/ticket/64588#comment:2 the PR #10866 solve the issue 🤔

@mukeshpanchal27 this is the ticket #64588
https://core.trac.wordpress.org/ticket/64588

[joseandres25]

After reading through the discussion and both patches, I think PR #10866 (the line-height: inherit; fix) is the better approach here.

The root cause seems to be that .js-update-details-toggle has its own line-height that doesn't match the surrounding <p> (which inherits the default 1.5), and that's what pushes the icon up by 1px. PR #10876 fixes the visible symptom by hardcoding the margin to 7px, but that only patches this specific case — if the paragraph's font-size or line-height changes elsewhere (different admin color schemes, browser zoom, etc.), the 0.5em rounding issue could resurface, while the margin override wouldn't help there.

Making the button inherit the line-height addresses the actual mechanism, so it should hold up better across different conditions. +1 for #10866.

The "Plugin updated successfully. More details." notice (and other .notice/.updated/.error paragraphs) uses margin: 0.5em 0, which computes to a fractional 6.5px. Browsers round that inconsistently to whole device pixels depending on zoom/DPI, producing a visibly uneven 6px/7px top/bottom margin. Using an integer 7px removes the rounding ambiguity entirely.

Separately, the "More details" toggle button's line-height didn't match the surrounding paragraph's (browser default normal vs. 20.02px), so its dashicon sat off the text baseline. Making it inherit the paragraph's line-height fixes that independent misalignment.

I tested this locally by applying each existing fix in isolation and measuring computed styles on the actual markup from class-bulk-upgrader-skin.php:

	margin-only fix	line-height-only fix	both (this PR)
paragraph margin (computed)	7px / 7px	6.5px / 6.5px	7px / 7px
toggle line-height vs. paragraph	normal ≠ 20.02px	20.02px = 20.02px	20.02px = 20.02px

Both changes are needed — they fix two different things that got conflated in the ticket discussion, not two competing solutions to the same bug.

This combines and rebases the fixes proposed in #10866 (props @ShaneMuir) and #10876 (props @manishdhorepatil-art), the latter of which no longer applies cleanly against current trunk.

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Sonnet 5
Used for: Diagnosing and testing the two prior candidate fixes (measuring computed styles before/after each), and authoring/rebasing this combined patch. Reviewed by me before submitting.

[dhavalkapadane]

Reproduction Report

Environment

• WordPress: trunk
• PHP: 8.3.33
• Browser: Chrome
• Server: nginx (wordpress-develop local Docker env)
• OS: Windows

Steps taken

1. Triggered an admin notice banner (Plugins → activate/deactivate a plugin).
2. Inspected the <p> element inside the .notice banner via DevTools.
3. Ran getComputedStyle($0).marginTop and getComputedStyle($0).marginBottom in the Console.
4. 🐞 Bug occurs: Both marginTop and marginBottom compute to exactly 6.5px (from the source margin: 0.5em 0 at 13px font-size).

Expected behavior

• Since the CSS declares symmetric 0.5em 0 margins, the two sides should render visually even.

Additional Notes

• The computed style itself is identical (6.5px/6.5px) — not asymmetric as one might assume from the visual bug. This confirms the unevenness the reporter observed is a browser sub-pixel rendering/painting artifact: a fractional CSS value (6.5px) gets rounded differently to actual screen pixels depending on the element's cumulative position on the page, not because Core's CSS declares different top/bottom values.
• This suggests a fix would need to replace the 0.5em value with an explicit even-pixel value (e.g. margin: 6px 0 or 7px 0) to avoid the fractional value being subject to inconsistent browser rounding, rather than a computed-style-level fix.
• No patch is currently attached to this ticket — this report reproduces and diagnoses the root cause to help inform one.

Support Content

• Confirmed via Chrome DevTools Console: getComputedStyle($0).marginTop → "6.5px", getComputedStyle($0).marginBottom → "6.5px".

## Summary

Sets the update-details toggle button to inherit the notice paragraph line height. This keeps the disclosure icon aligned with the message text and removes the one-pixel vertical discrepancy described in the ticket.

## Testing

• git diff --check
• Verified the patch applies cleanly in reverse against the current checkout.

This pull request is for code review. Core changes are committed through the WordPress SVN workflow.