Вокруг ссылки c фоном образуется белая рамка. Как избавиться от этого эффекта?

@YevhenFodorov · Регистрация: 18.01.2022

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
<div className="item__img">
      <a className="item__link" href="">
            <img src="https://images.pexels.com/photos/14747076/pexels-photo-14747076.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="" />
      </a>
</div>

Вокруг ссылки с фоном образуется белая рамка. Как избавиться от этого эффекта?

CSS
1
2
3
                    text-decoration: none;
                    border: none;
                    outline: none;

это пробовал, пока не помогло..

KingdaKa · 26.12.2022, 18:34

className - это вы так классы задаёте?
И хорошо бы привести код всего блока чтобы не ванговать.

@mr_dramm · 26.12.2022, 18:53

Сообщение от YevhenFodorov

Вокруг ссылки с фоном образуется белая рамка. Как избавиться от этого эффекта?

странно что белая рамка сверху и справа.
Можно попробовать убрать отступы

CSS
1
2
3
.item__img a, .item__img img{
    margin: 0; padding: 0;
}

либо картинка с такой рамкой изначально, либо еще много вариантов без стилей сложно понять

Привер без рамок:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .item__img {
        background: black;
        padding: 1rem;
        max-width: 66%;
        flex-shrink: 0;
    }
    img{
        max-width: 100%;
        display: block;
    }
    .box{
        display: flex;
    }
    .desc{
        padding: 1rem;
        display: flex;
        align-items: center;
    }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="item__img">
            <a class="item__link" href="">
                <img src="https://picsum.photos/id/1/900/300" alt="" />
            </a>
        </div>
        <div class="desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sint illum expedita, cumque voluptatum explicabo iure repellendus quo ducimus officiis saepe molestias, tenetur omnis, quidem at. Quam enim id earum!
        </div>
    </div>
    <script></script>
</body>
 
</html>

Сообщение от KingdaKa

className - это вы так классы задаёте?

React наверное

KingdaKa · 26.12.2022, 21:52

Сообщение от mr_dramm

странно что белая рамка сверху и справа.

Еще у img же надо задавать display: block либо vertical-align: bottom; /* middle */, но этот бейзлайн не объясняет полосу справа.

@YevhenFodorov · 27.12.2022, 11:24 **[ТС]**

странно что белая рамка сверху и справа. --- рамка появляется с разных сторон, в зависимости от разрешения экрана..
на коде ниже заметил что на ноутбуке15 она есть, а на отдельном мониторе 22 дюйма ее нет ни на каком из разрешений

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .item__img {
        overflow: hidden;
        flex: 1 0 60%;
        border: 15px solid black;
        border-radius: 5px;       
    }
    img{
        max-width: 100%;
        display: block;
    }
    .box{
         background-color: #fff;
         flex-direction: row;
         display: flex;
         margin-top: 60px;
         padding: 20px;
         border-radius: 5px;
         height: 400px;
         box-sizing: border-box;
    }
      .desc{
        padding: 1rem;
        display: flex;
        align-items: center;
    }
   
    </style>
</head>
 
<body>
    <div class="box">
        <div class="item__img">
            <a class="item__link" href="">
                <img src="https://picsum.photos/id/1/900/300" alt="" />
            </a>
        </div>
        <div class="desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sint illum expedita, cumque voluptatum explicabo iure repellendus quo ducimus officiis saepe molestias, tenetur omnis, quidem at. Quam enim id earum!
        </div>
    </div>
    <script></script>
</body>
 
</html>

KingdaKa · 27.12.2022, 11:43

Проверил в Хроме, ФФ... и даже на эмуляторе Мака и яблокофоне.

Барабашка завелся у тя

@mr_dramm · 27.12.2022, 11:53

у меня тоже есть этот отступ в хроме, и проходит если сделать border 16px, это связано с особенностью отрисовки в разных браузерах(и похоже на разных конфигурациях компьютерна еcли у KingdaKa все впорядке в хром), если есть такая возможность сделайте background картинки одного цвета с границей как в моем примере.

CSS
1
2
3
4
5
6
.item__img {
    overflow: hidden;
    flex: 1 0 60%;
    border: 16px solid black;
    border-radius: 5px;
}

KingdaKa · 27.12.2022, 12:47

Так, всё, я понял в чем проблема. Масштабирование браузера отличное от 100%.
Если гулять в меньше/больше, то рамка эта тоже начинает гулять как браузеру угодно.
Это связано с погрешностью вычислений.

Сразу в бошку стукнул фокус с аутлайном - это костыль, возможно не лучший. Но работает

CSS
1
2
3
4
5
6
7
8
    .item__img {
        overflow: hidden;
        flex: 1 0 60%;
        border: 14px solid black;
        border-radius: 5px;       
        outline: 2px solid red; /* ессно заменить на black */       
        outline-offset: -15px;
    }

Можно еще попробовать фокус с "задвигом" картинки под бордюр на 1-2 пикселя позиционированием...

Да, эта проблема не нова, мне кажется я её уже встречал и гугл подтверждает.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	26.12.2022, 18:34
	`className` - это вы так классы задаёте? И хорошо бы привести код всего блока чтобы не ванговать. 0

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	27.12.2022, 11:43
	Проверил в Хроме, ФФ... и даже на эмуляторе Мака и яблокофоне. Барабашка завелся у тя 0

Вокруг ссылки c фоном образуется белая рамка. Как избавиться от этого эффекта?

Решение