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

Question

relows @relows

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

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

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

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

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 комментарий

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

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

Войти через центр авторизации

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

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

+1 ещё

Простой
Как работает спам сообщений в ютубе?
- 1 подписчик
- час назад
- 46 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 14 часов назад
- 38 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 15 часов назад
- 33 просмотра
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 18 часов назад
- 71 просмотр
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 22 часа назад
- 78 просмотров
3

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

Простой
Как сделать чтобы при нажатии на кнопку или сылку в div блоке открывалась галерея?
- 1 подписчик
- 23 часа назад
- 29 просмотров
0

ответов
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- вчера
- 675 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- вчера
- 2044 просмотра
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 203 просмотра
4

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Flutter developer

24 апр. 2024, в 13:10

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

Редактирование плагина на WP (дизайн, доп поля)

24 апр. 2024, в 13:01

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

Верстка двух страниц

24 апр. 2024, в 13:00

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

Что-то я не увидел у вас одинаковых стилей.
Рустам Байназаров, Имелось ввиду то, что и у того, и у того элемента одинаковое значение ширины и высоты. Тостер не даёт делать такие длинные названия
На первом скриншоте кажется изменён масштаб. 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

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

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

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

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

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