Нулевой запас отдельных элементов - PullRequest
Новая
       15

Нулевой запас отдельных элементов

0 голосов
/ 12 января 2019

Есть ли способ обнуления поля отдельных элементов? Во фрагменте кода я обнулил поле, установив html и body body на 0. Но на самом деле я хотел бы обнулить только поле таблицы, чтобы его внутреннее содержимое и остальная часть тела html контент сохраняет «стандартное» поле.

Посмотрите на скриншоты, которые я добавил. 

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <style>
      html, body {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
  background-color: #000;
  width: 100%;
}
</style>
    <title>Zero-out margin of single elements</title>
  </head>

  <body>
  <p>This text should've its standard margin</p>
    <table>
    <td>
    <p style="color: white">This text should've its standard margin. Only the table should extend the browser width.</p>
    </td>     
    </table>
    <hr>
    <p>This hr should've its standard margin too</p>
  </body>

</html>

Взгляните на это, чтобы лучше понять, что я имею в виду: https://meyerweb.com/eric/tools/css/reset/

Содержание расширяется / достигает полной ширины браузера: https://jsfiddle.net/48qeuanf/1/

Контент не расширяется / не достигает полной ширины браузера (стандартное поле): https://jsfiddle.net/48qeuanf/2/

Браузер с полем по умолчанию:

Расширение HTML по умолчанию

Браузер с полем по умолчанию (код)]:

Расширение HTML по умолчанию (Код):

1 Ответ

0 голосов
/ 12 января 2019

Измените свой CSS на это: 

     body
{
  margin:0
}
body > *
{
  margin:3px;
  background-color: #FF0000;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
  background-color: black;
  width: 100%;
  margin : initial
  }
  td > p
  {
    margin:2px;
  }

Начальное ключевое слово используется, чтобы установить для свойства CSS значение по умолчанию. Селектор element > * выбирает все дочерние элементы этого элемента

Проверьте скрипку

...