Разница между контуром и границей

Question

Кто-нибудь знает какие-либо различия между свойствами 'border' и 'outline' в CSS? Если нет никакой разницы, то почему существуют два свойства для одной и той же вещи?

Answer 1

Я сделал небольшой кусочек кода CSS / HTML, чтобы увидеть разницу между ними.

outline лучше включать потенциальные переполненные дочерние элементы, особенно в встроенный контейнер.

border гораздо более приспособлен для блоков -хвостовых элементов.

Скрипка для вас, сэр!

Answer 2

В качестве практического примера использования «контура», слабая пунктирная граница, которая следует за фокусом системы на веб-странице (например, если вы переходите по ссылкам), может управляться с помощью свойства outline (по крайней мере, я знаю может в Firefox, не пробовал другие браузеры).

Обычный метод "замены изображения" заключается в использовании, например:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

со следующим в CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

Проблема в том, что когда фокус достигает метки, контур отклоняется от 1000em влево. Контур может позволить вам отключить контур фокуса на таких элементах.

Я считаю, что панель инструментов разработчика IE также использует что-то вроде контура "под капотом" при выделении элементов для проверки в режиме "выбор". Это хорошо показывает тот факт, что «контур» не занимает места.

Answer 3

Скопировано из W3Schools:

Определение и использование

Контур - это нарисованная линия вокруг элементов (за пределами границ) чтобы элемент выделялся.