Почему в не срабатывает конструкция по отступу с отрицательным margin (на половину отступа) у родителя и положительным padding (на половину отступа) у дочернего?
По коду, например в footer__row всё работает нормально. А вот в page__row ни в какую.
код страницы
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <meta charset="UTF-8">
- <title>Photographer Vladimir Pritchin</title>
- <link rel="stylesheet" href="css/style-test.css">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- </head>
- <body>
- <div class="wrapper">
- <!-- Start content -->
- <div class="content">
- <!-- Start header + nav -->
- <header class="header">
- <div class="container">
- <div class="header__body">
- <a href="#" class="header__logo">
- <img src="images/logo.png" alt="">
- </a>
- <div class="header__burger">
- <span></span>
- </div>
- <nav class="header__menu">
- <ul class="header__list">
- <li>
- <a href="" class="header__link">Портфолио</a>
- </li>
- <li>
- <a href="" class="header__link">Новости</a>
- </li>
- <li>
- <a href="" class="header__link">Цены</a>
- </li>
- <li>
- <a href="" class="header__link">Обо мне</a>
- </li>
- <li>
- <a href="" class="header__link">Контакты</a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
- </header>
- <!-- END header + nav -->
- <!-- Start page content -->
- <div class="page">
- <div class="container">
- <div class="page__row">
- <div class="page__column page__column_1">
- <div class="page__content">column 1</div>
- </div>
- <div class="page__column page__column_2">
- <div class="page__content">column 2</div>
- </div>
- </div>
- </div>
- </div>
- <!-- END page content -->
- </div>
- <!-- END content -->
- <!-- Start Footer -->
- <footer class="footer">
- <div class="container">
- <div class="footer__row">
- <div class="footer__column">
- <div class="footer__item">
- <div class="footer__content">
- All rights reserved © | photographer Vladimir Pritchin<br>
- Версия сайта: v2.12-wp-flex от 00.00.2020
- </div>
- </div>
- </div>
- <div class="footer__column">
- <div class="footer__item">
- <div class="footer__content">
- Тру-ля-ля, тру-ля-ля, мы везём с собой кота, чижика, собаку, кошку-забияку, вот компания какая
- </div>
- </div>
- </div>
- <div class="footer__column">
- <div class="footer__item">
- <div class="footer__content">
- <a href="http://www.photounion.ru/" title="Союз ФотоХудожников России">
- <img src="images/SFR_LOGO_R.jpg" alt="Союз ФотоХудожников России" width="250" height="60">
- </a>
- <a href="http://rgo.ru" title="Русское Географическое Общество" target="_blank">
- <img src="images/rgo-2.jpg" width="250" height="60" alt="Русское Географическое Общество" longdesc="http://rgo.ru">
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </footer>
- <!-- END footer -->
- </div>
- <!-- END wrapper -->
- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
- <script src="js/script.js"></script>
- </body>
- </html>