0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00

Set explicit text-align on <body> element so we can use inherit to override the default <th> text-align value

This commit is contained in:
Mark Otto 2017-06-17 21:19:36 -07:00 committed by Mark Otto
parent caa7117e23
commit 09019a8ecd
2 changed files with 7 additions and 3 deletions

View File

@ -24,7 +24,7 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. - The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. - No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. - The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
## Native font stack ## Native font stack

View File

@ -48,6 +48,8 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s
// //
// 1. Remove the margin in all browsers. // 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`. // 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use the
// the `inherit` value on things like `<th>` elements.
body { body {
margin: 0; // 1 margin: 0; // 1
@ -56,6 +58,7 @@ body {
font-weight: $font-weight-base; font-weight: $font-weight-base;
line-height: $line-height-base; line-height: $line-height-base;
color: $body-color; color: $body-color;
text-align: left; // 3
background-color: $body-bg; // 2 background-color: $body-bg; // 2
} }
@ -304,8 +307,9 @@ caption {
} }
th { th {
// Matches default `<td>` alignment // Matches default `<td>` alignment by inheriting from the `<body>`, or the
text-align: left; // closest parent with a set `text-align`.
text-align: inherit;
} }