Почему блоки с одинаковыми стилями могут выглядеть по-разному?

Question

relows @relows

Учусь веб дизайну и программированию

Почему блоки с одинаковыми стилями могут выглядеть по-разному?

Через инспектор кода можно понять что ширина и высота одинаковые, а на деле выглядя они совсем по-разному

Вопрос задан более трёх лет назад
202 просмотра

8 комментариев

Подписаться 1 Простой 8 комментариев

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 2

2 комментария

relows @relows Автор вопроса

https://github.com/TheRelow/5CRM

и вот

header .top, header .top .contact, header .bottom {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; }

* {
  padding: 0;
  margin: 0; }

html {
  background: white;
  transition: all .33s ease-out;
  min-height: 101vh;
  overflow-y: scroll;
  overflow-x: hidden; }

header {
  z-index: 2;
  height: 138px;
  width: 100%;
  background: #f3f3f3;
  vertical-align: middle;
  font: 14px "PT Sans"; }
  header .top {
    z-index: inherit;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    width: 90%;
    max-width: 1100px;
    margin: auto;
    color: #212121;
    font-size: 15px; }
    header .top .logo img {
      height: 23px;
      width: auto; }
    header .top .contact .contact-item {
      height: 58px;
      padding-right: 20px;
      margin-right: 20px;
      border-right: 1px solid #dbdbdb; }
    header .top .contact .contact-item:last-child {
      padding: 0;
      margin: 0;
      border: none; }
  header .bottom {
    z-index: inherit;
    align-items: center;
    height: 76px;
    width: 90%;
    max-width: 1100px;
    margin: auto;
    background: #797979;
    color: white; }

.one-screen {
  z-index: 1;
  height: 100vh;
  width: 100%;
  background: gray; }

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<header>
		<div class="top">
			<div class="logo"><img src="img/logo.png" alt=""></div>
			<div class="contact">
				<div class="contact-item">1</div>
				<div class="contact-item">2</div>
				<div class="contact-item">4</div>
			</div>
		</div>
		<div class="bottom">
			<div class="menu"></div>
			<div class="controls"></div>
		</div>
	</header>
	<section class="one-screen"></section>
</body>
</html>

Написано более трёх лет назад

relows @relows Автор вопроса

Оказалось что на первом примере увеличен масштаб

Написано более трёх лет назад

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

WordPress

+1 ещё

Простой
Блочный сайт сверстать с уникальным дизайном, как лучше организовать редактирование текста конечным пользователем?
- 1 подписчик
- 4 часа назад
- 85 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 134 просмотра
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 95 просмотров
0

ответов
PHP

+3 ещё

Простой
Firefox больше не отправляет в HTTP_ACCEPT image/webp?
- 3 подписчика
- 22 нояб.
- 599 просмотров
2

ответа
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
Веб-разработка

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 22 нояб.
- 95 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Изображения на главную страницу в стиле Jetton и 1вин

25 нояб. 2024, в 00:22

12000 руб./за проект

Дизайн презентации

24 нояб. 2024, в 23:46

20000 руб./за проект

Разработать Telegram-бота для анализа звонков продаж

24 нояб. 2024, в 23:15

10000 руб./за проект

Что-то я не увидел у вас одинаковых стилей.
Рустам Байназаров, Имелось ввиду то, что и у того, и у того элемента одинаковое значение ширины и высоты. Тостер не даёт делать такие длинные названия
На первом скриншоте кажется изменён масштаб. Ctrl-0 должен помочь
Алексей Тен, хахах, действительно!
Алексей Тен, Оставьте ответ, чтобы можно было выбрать решение
relows, мда...

Алексей Тен, отлично :))
Рустам Байназаров, да это кажется самая частая «проблема»
Алексей Тен, согласен.

P. S. Кавычки в нужном месте.

Answer 1 · 2019-06-13 19:35:49

Lynn «Кофеман» @Lynn

nginx, js, css

На первом скриншоте изменён масштаб, видно лупу в адресной строке. Ctrl-0 должен помочь.

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2019-06-13 19:17:31

N7EIght @N7EIght

Отправьте разметку css

Ответ написан более трёх лет назад

2 комментария

Answer 3 · 2019-06-13 21:24:03

Встречный вопрос: а какие должны быть ширины и высоты у этих блоков и почему они должны отличаться?
Из скриптов совершенно непонятно какие стили определили для этих блоков

Почему блоки с одинаковыми стилями могут выглядеть по-разному?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт