Почему размер заголовка больше 870 пикселей?

#html #css

#HTML #css

Вопрос:

У меня есть следующая страница:

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="page">
        <div id="header">
            <ul id="menu">
                <li class="products">
                    <a href="products.html">Products</a>
                </li>
                <li class="resume">
                    <a href="resume.html">My resume</a>
                </li>
                <li class="blog">
                    <a href="blog.html">Blog</a>
                </li>
                <li class="about">
                    <a href="about.html">About</a>
                </li>
            </ul>
        </div>
        <div id="main">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

</html>

Index.css:

 #page {
    width: 1024px;
    height: 900px;
    margin:0 auto;
}

#header {
    width:870px;
}

#menu {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;
}

#menu li {
    float: left;
}

#main {

}

#footer {
    width:870px:
}

Common.css:

 body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a {
    text-decoration:none;
}

Тестируя его с помощью Firebug, я вижу #header , что это 870 пикселей, но #menu больше #header .

Я отключил поля и отступы в стиле меню с тем же результатом.

Почему #menu размер больше 870 пикселей?

Я хочу, чтобы границы имели длину 870 пикселей.

Ответ №1:

Потому #menu что то, что содержится внутри него, имеет

width из 870 пикселей
padding-left из 34 пикселей

это добавляет к 870 34 = 904 пикселям.

установка ширины #menu элемента в 870-34 = 836 пикселей ( width:836px; ) сделает его точно подходящим..

1. Но тогда есть 2 пикселя от границ, которые следует учитывать, увеличивая ширину еще на 2 пикселя. Границы всегда находятся снаружи, за исключением таблиц.

2. @rickyduck, он определил только верхние / нижние границы .. 🙂

Ответ №2:

 #menu {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;
}

36 пикселей больше, чем 870 пикселей. Установить width в 834px #menu

1. Спасибо за ваш ответ. Откуда берутся эти 36 пикселей?

2. У вас есть отступ справа от 34 пикселей, а затем граница слева и граница справа от 1 пикселя;

3. Как указал @Gaby aka G. Petrioli, на самом деле это должно быть 34px так, поскольку граница применима только к верхней и нижней части.

Ответ №3:

Потому что у него есть отступы. Заполнение добавит дополнительные 34 пикселя к вашей ширине. Если вы хотите, чтобы размер меню был 870 пикселей, вам придется изменить ширину на 836 пикселей.

Если вы измените #menu эти свойства, вы получите то, что хотите.

 #menu {
  border-bottom: 1px solid #EEEEEE;
  border-top: 1px solid #EEEEEE;
  clear: both;
  list-style-type: none;
  margin: 20px 0;
  overflow: hidden;
  padding: 11px 0 11px 34px;
  width: 836px;

}

Ответ №4:

Установленная вами ширина похожа на элемент в поле. У вас есть ширина содержимого (которая соответствует заданной вами ширине), затем отступ, затем граница (поле), затем поле. В приведенном выше коде вы установили отступы и границу, которые увеличат видимый размер элемента.

Ответ №5:

#menu не больше, чем 870 пикселей, он равен требуемому.

ul имеет отступ.

Добавьте padding-left: 0; в свой #menu CSS или уменьшите #menu ширину.