[docs] Improve visual look of loose lists

mui · Feb 14, 2023 · 82a0bfd · 82a0bfd
1 parent af5b3f5
commit 82a0bfd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/docs/data/material/components/radio-buttons/radio-buttons.md b/docs/data/material/components/radio-buttons/radio-buttons.md
@@ -104,6 +104,7 @@ import { useRadioGroup } from '@mui/material/RadioGroup';
 (WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
 
 - All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element ([FormControlLabel](/material-ui/api/form-control-label/)).
+
 - When a label can't be used, it's necessary to add an attribute directly to the input component.
   In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` property.
 

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -434,10 +434,15 @@ const Root = styled('div')(
       },
     },
     '& li': {
+      // tight lists https://spec.commonmark.org/0.30/#tight
       marginBottom: 4,
       '& pre': {
         marginTop: theme.spacing(1),
       },
+      // loose lists https://spec.commonmark.org/0.30/#loose
+      '& > p': {
+        marginBottom: theme.spacing(1),
+      },
     },
   }),
   {