Как работает width в css?

Question

Только начал изучать css. Почему элементы с одинаковым параметром width реально имеют разную ширину? И как это исправить? У меня есть два элемента - заголовок h2 и список ul. И при одинаковом значении ширины в 300px заголовок уже чем список. Это как-то связано именно со списком?. Как мне сделать, чтобы они оба были одинаковой ширины (без подбора значений вручную)?

body{
    margin: auto;
    width: 60%;
    display: block;
}

h2 {
    width: 300px;
    text-align: center;
    border: ridge;
}

ul {
    width: 300px;
    border: ridge;
}

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css">
        <title>
            Title here
        </title>
    </head>
    <body>
        <h2>
            TODO:
        </h2>
        <ul>
            <li>Make front page</li>
            <li>Make new styles</li>
            <li>Create database</li>
            <li>Write some code</li>
        </ul>
    </body>
</html>

Answer 1

Разная ширина связана с тем, что строчные теги имеют вшитые padding и margin. Пропишите в стилях к ul "padding: 0;" Подробнее можно почитать: http://htmlbook.ru/content/vstroennye-elementy

Answer 2

Посмотрите сейчас. Ширина не может быть разной, если указан один параметр width. Но если такое происходит, то нужно искать причину. Возможно, причина в отступах margin или padding. В вашем примере указал все отступы равны ноль. Вот результат:

body {
  margin: auto;
  width: 60%;
  display: block;
}

h2 {
  width: 300px;
  text-align: center;
  border: ridge;
  
  margin: 0;
  padding: 0;
}

ul {
  width: 300px;
  border: ridge;
  
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>
    Title here
  </title>
</head>

<body>
  <h2>
    TODO:
  </h2>
  <ul>
    <li>Make front page</li>
    <li>Make new styles</li>
    <li>Create database</li>
    <li>Write some code</li>
  </ul>
</body>

</html>

Answer 3

Дело в том, что по умолчанию для всех элементов box-sizing: content-box, почитать
По умолчанию width для элемента равняется = padding + border-width + width
В примере видно как он себя ведёт:

div {
  width: 80px;
  padding: 10px;
  background-color: red;
  margin: 10px;
  color: white;
  border: 5px solid black;
}

.border-box {
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box; /* по умолчанию для всех элементов */
  
}

<div class="border-box">
  Реально 80px блок
</div>
<div class="content-box">
  80width + padding20px (слева и справа по 10px) + border10px (слева и справа по 5px)
</div>

Я в своих проектах используя такое, чтобы задать для всех элементов box-sizing: border-box

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

БЛОГ НА HUSL

Как работает width в css?

Ответы (3 шт):