Merge pull request #18801 from ckeditor/cc/7990-paragraph-styles

Fix (list, table): Improved rendering of the <p> element when it is an only child of a list item (`<li>`) or a table cell (`<td>` or `<th>`). Closes #17440.

Fix: (list, table): Improve the paragraphs' spacing in lists and tables. Closes: #11347.

MAJOR BREAKING CHANGE (list): Removed vertical spacing in list items by resetting margins for `<p>` elements that are the child of a `<li>` element.

MAJOR BREAKING CHANGE (table): Removed vertical spacing in table cells by collapsing margins of <p> elements that are the only child of a `<td>` or `<th>` element.

Author: Witoso

packages/ckeditor5-list/theme/listformatting.css

@@ -10,6 +10,24 @@
 }
 
 .ck-content li {
+	/* Opinionated list content styling: prevents content shift
+	 * when a list becomes multi-block (Enter + Backspace scenario).
+	 * See: https://github.com/ckeditor/ckeditor5/pull/18801
+	 */
+	& > p:first-of-type {
+		margin-top: 0;
+	}
+
+	/* Prevents margins from appearing when a bogus paragraph
+	 * receives line height or text alignment.
+	 * Ensures a consistent experience with the first paragraph.
+	 * See: https://github.com/ckeditor/ckeditor5/pull/18801
+	 */
+	& > p:only-child {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
 	&.ck-list-marker-bold::marker {
 		font-weight: bold;
 	}

packages/ckeditor5-table/theme/table.css

@@ -54,9 +54,29 @@
 
 				& > td,
 				& > th {
-					/* stylelint-enable no-descending-specificity */
+					/* Opinionated table content styling: prevents content from shifting
+					 * when Enter is pressed in the first cell.
+					 * See: https://github.com/ckeditor/ckeditor5/pull/18801
+					 */
+					& > p:first-of-type {
+						margin-top: 0;
+					}
+
+					/* Mirrors the rule above for the last paragraph to keep the
+					 * experience consistent with the first paragraph.
+					 *
+					 * Together, these rules prevent margins from appearing when a
+					 * bogus paragraph becomes a real paragraph after it receives line
+					 * height, text alignment, or other block style.
+					 *
+					 * See: https://github.com/ckeditor/ckeditor5/pull/18801
+					 */
+					& > p:last-of-type {
+						margin-bottom: 0;
+					}
+
 					min-width: 2em;
-					padding: .4em;
+					padding: 0.4em;
 
 					/* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
 					However, the border is a content style, so it should use .ck-content (so it works outside the editor).