Испытание: строим сетку[27/32](92%) Вопрос про отступы.

Курсы §15. Сетки
1

Подскажите пожалуйста, почему, когда я задаю padding 5px, отступ слева получается 5px, а сверху значительно больше?

HTML 
    <body>
    <div class="wrapper">
        <header>
            <div class="header-block">
                <p>Header</p>
            </div>
            <div class="menu-block">
                <div class="positioner">
                    <p>Menu</p>
                </div>
            </div>
            <div class="positioner">
                <div class="header-column header-column-1">
                    <p>Promo 1</p>
                </div>
                <div class="header-column header-column-2">
                    <p>Promo 2</p>
                </div>
            </div>
        </header>
        <main>
            <div class="positioner">
                <div class="main-column left-column">
                    <p>Left</p>
                </div>
                <div class="main-column center-column">
                    <p>Main</p>
                </div>
                <div class="main-column right-column">
                    <p>Right</p>
                </div>
            </div>
        </main>
        <footer>
            <div class="positioner">
                <p>Footer</p>
            </div>
        </footer>
    </div>
    </body>
CSS 
html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}

.wrapper {
    padding-top: 1px;
}

.positioner::after {
    content: "";
    display: table;
    clear: both;
}

.wrapper {
    background: #34495e;
}

.header-block {
    width: 350px;
    min-height: 35px;
    margin: 0 auto;
    background: #c0392b;
}

.header-block p {
    padding: 5px
}

.menu-block {
    background: #3498DB;
    min-height: 35px;
    margin-bottom: 10px;
}

.positioner {
    width: 350px;
    margin: 0 auto;
}

.menu-block p {
    padding: 5px;
}

.header-column {
    background: #c0392b;
    width: 170px;
    min-height: 60px;
    margin-bottom: 10px;
}

.header-column-1 {
    float: left;
    margin-right: 10px;
}

.header-column-2 {
    float: left;
}

.header-column p {
    padding-left: 5px;
}

main {
    background: white;
    width: 100%;
}

.main-section {
    width: 100%;
}

.main-column {
    background: #3498DB;
    min-height: 110px;
    margin: 10px 10px 10px 0;
}

.main-column p {
    padding-left: 5px;
}




.left-column {
    float: left;
    width: 70px;
}

.center-column {
    width: 190px;
    float: left;
}

.right-column {
    width: 70px;
    float: left;
    margin-right: 0px;
}

footer p {
    padding-left: 5px;
    min-height: 35px;
}

img-2017-10-26-20-11-35

2

У тега параграфа <p> есть внешние отступы по умолчанию. Их необходимо обнулить.

3

Спасибо большое за столь оперативный ответ. Вы уже успели ответить, а я даже не успел разобраться, как сделать код в моем сообщении в удобочитаемом виде.

4

Кнопка </> в редакторе сообщений.

5

Да, спасибо. Но почему-то никак не получается победить этот редактор:) Вставляю код, а вставляется только одна строчка. Когда вставлял html-код просто обычным образом, пропали все обозначения тегов и классов/ Наверное на этом сайте есть инструкция, как все правильно делать, но пока не удалось ее найти. Не могли бы вы дать на нее ссылку, если таковая имеется. Постараюсь сам разобраться, чтобы вас не мучать вопросами.

6

Кажется разобрался. Еще раз спасибо вам большое!

7

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

8

Я тоже готов поучаствовать, можно встроить эту инструкцию в форум для новых участников, например. Можно закрепить этот пост. И ещё добавить в плейсхолдер нового сообщения подсказку как-то.

9

В закреплении поста или темы смысла почти нет. В плейсхолдере можно было бы упомянуть кнопку для вставки кода. Это самый частый вопрос. Но вообще подсказки при создании новой темы особого эффекта не имеют. Например, при создании новой темы справа отображается подсказка: “Ваша тема похожа на …” - и список похожих созданных тем. И мало кто обращает на это внимание.
Хотелось бы сделать подсказку как здесь.
Это “объявление” находится вверху каждой страницы и не обратить внимание не него, наверное, невозможно.
Но есть другой вопрос. Описать несколько самых востребованных действий или делать полноценную инструкцию в виде темы и добавить ссылку на полный вариант в подсказку?

10

Наверное лучше, чтобы сразу был что-то написано востребованное. И полный вариант тоже нужен, как на JS-course.

11

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

1 лайк