Граница блока (css)

@puhur01 · Регистрация: 28.06.2012

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

Добрый день. Как можно расположить границу внутри блока? Что-то вроде отрицательного отступа. Во вложении картинка, на которой нарисован нужный эффект.

KOPOJI · 07.07.2012, 14:43

внутрь этого блока вставляете еще один с отступами во сколько вам там надо и рамкой

Добавлено через 1 минуту
и вот еще, тоже посмотрите, может что вам подойтет из этого

@Tesla · 07.07.2012, 16:39

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

Добрый день. Как можно расположить границу внутри блока? Что-то вроде отрицательного отступа. Во вложении картинка, на которой нарисован нужный эффект.

Толком ничево не понял что ты хочеш.
Если я правлиьно понял то тебе нужны отступы всередини от блока. Если да, тогда задай блоку свойство padding:10px; Где 10px - ето растояние в пикселях которое будет от границы блока. также можеш задать отдельно padding-top:20px; padding-right:10px; padding-bottom:30px; padding-left:10px; или padding:20px 10px 10px 30px;

Если же тебе нужно отрицательное значение то ты ево можеш задать. Например margin-top:-20px;

Если не ответил на твой вопрос то опишы ево конкретнее

@puhur01 · 07.07.2012, 17:20 **[ТС]**

Tesla, нет, нужно другое. Если задать границу блока, то она обрамляет сам блок, а мне нужно, чтобы она располагалась внутри блока.

Добавлено через 25 минут
KOPOJI, почему-то такой способ не дает нужный результат, возможно, я что-то не так делаю.
Есть три колонки:

HTML5
1
2
3
4
5
6
7
8
9
<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Вот css:

CSS
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
#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Сложная структура, т.к. это необходимо для того, чтобы растянуть сайдбары до футеров. Задача состоит в том, чтобы левую колонку (column1) снабдить внутренней рамкой, как на рисунке в моем первом сообщении. Я пробую добавить div в container1, но это не дает нужный результат.

@gulliver · 07.07.2012, 19:47

HTML5
1
2
3
4
<div class="firstDiv">
    <div class="secondDiv"> 
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{ margin:0; padding:0;}
 
.firstDiv
{
    width:450px;
    height:500px;
    background:#808080;
    margin:20px auto;
    padding-top:20px;
}
 
.secondDiv
{
    width:390px;
    height:470px;
    border:5px solid white;
    margin:auto;
}

@Tesla · 07.07.2012, 20:58

puhur01, ну сделай блок на 2px меньше и border:1px solid #f00;

@puhur01 · 07.07.2012, 21:18 **[ТС]**

Tesla, у меня сложная структура дивов (это необходимо, чтобы сделать сайдбары растянутыми до футеров), я не знаю, куда вставлять меньший блок. В сообщении выше есть разметка и css.
Была попытка вставить блок в container1 (содержит левую колонку сайта, где и нужна граница), но это ни к чему не привело, увы.

KOPOJI · 07.07.2012, 21:56

ну вот например так

HTML5
1
2
3
<div id="нужный див с внутренней рамкой" style="display:block; width:800px; padding:30px; height:600px;outline:1px solid green;">
    <div id="див с самой рамкой" style="width:100%;height:100%; margin:0; border:3px solid red;"></div>
</div>

Добавлено через 39 секунд
не забудьте о том что для обоих блоков нужно прописать ширину и высоту

@gulliver · 07.07.2012, 21:58

Мне кажется я написал тоже самое, только раньше...

@Tesla · 07.07.2012, 23:20

Я уже не помню как называеца, есть такое свойство, оно работает как border, но в отличеи от от border не занимает место вокруг контейнера, а располагаеца в контейнере. Помоему начинаеца на "o" и есть там что-то "line"

KOPOJI · 08.07.2012, 02:04

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

Я уже не помню как называеца, есть такое свойство,

outline: ..

Добавлено через 1 минуту

Не по теме:

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

Мне кажется я написал тоже самое, только раньше...

я и написал тоже самое только проще)

@newJS · 08.07.2012, 06:58

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

есть такое свойство, оно работает как border

Кажется оно не кроссбраузерно, иначе его бы применяли все, а о нем мало кто знает и не приходилось слышать/видеть о его применении.

KOPOJI · 08.07.2012, 11:15

Не по теме:

outline
Internet Explorer---Chrome---Opera---Safari----Firefox----Android----iOS
----- 8.0+------------1.0+ ------7.0+----2.0+ -----1.5+ ---------1.0+----1.0+

@Tesla · 08.07.2012, 11:58

Да, именно outline. http://htmlbook.ru/css/outline пожжержывают все браузеры

KOPOJI · 08.07.2012, 14:02

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

Да, именно outline. http://htmlbook.ru/css/outline пожжержывают все браузеры

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

outline
Internet Explorer---Chrome---Opera---Safari----Firefox----Android----iOS
----- 8.0+------------1.0+ ------7.0+----2.0+ -----1.5+ ---------1.0+----1.0+

на том же сайте - если можно ему верить - не поддерживают 6 и 7 ослик

@Tesla · 08.07.2012, 14:56

а зачем нам ослик в нашем путишествее к звёздам ?

KOPOJI · 08.07.2012, 15:42

мало ли, в деревне кто сидит юзает 6 ослика

вопрос о кроссбраузерности - это для кого как

в данном случае, имхо, можно полностью забить на этот ИЕ))

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@puhur01 1 / 1 / 0 Регистрация: 28.06.2012 Сообщений: 33

	Граница блока (css) 07.07.2012, 14:41. Показов 5198. Ответов 16 Метки нет (Все метки) Добрый день. Как можно расположить границу внутри блока? Что-то вроде отрицательного отступа. Во вложении картинка, на которой нарисован нужный эффект. Миниатюры 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	07.07.2012, 14:43
	внутрь этого блока вставляете еще один с отступами во сколько вам там надо и рамкой Добавлено через 1 минуту и вот еще, тоже посмотрите, может что вам подойтет из этого 0

@Tesla 30 / 30 / 5 Регистрация: 01.05.2012 Сообщений: 350 Записей в блоге: 1
	07.07.2012, 20:58
	puhur01, ну сделай блок на 2px меньше и border:1px solid #f00; 0

@puhur01 1 / 1 / 0 Регистрация: 28.06.2012 Сообщений: 33
	07.07.2012, 21:18 [ТС]
	Tesla, у меня сложная структура дивов (это необходимо, чтобы сделать сайдбары растянутыми до футеров), я не знаю, куда вставлять меньший блок. В сообщении выше есть разметка и css. Была попытка вставить блок в container1 (содержит левую колонку сайта, где и нужна граница), но это ни к чему не привело, увы. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	07.07.2012, 21:58
	Мне кажется я написал тоже самое, только раньше... 0

@Tesla 30 / 30 / 5 Регистрация: 01.05.2012 Сообщений: 350 Записей в блоге: 1
	07.07.2012, 23:20
	Я уже не помню как называеца, есть такое свойство, оно работает как border, но в отличеи от от border не занимает место вокруг контейнера, а располагаеца в контейнере. Помоему начинаеца на "o" и есть там что-то "line" 0

KOPOJI
	08.07.2012, 11:15
	Не по теме: outline Internet Explorer---Chrome---Opera---Safari----Firefox----Android----iOS ----- 8.0+------------1.0+ ------7.0+----2.0+ -----1.5+ ---------1.0+----1.0+ 0

@Tesla 30 / 30 / 5 Регистрация: 01.05.2012 Сообщений: 350 Записей в блоге: 1
	08.07.2012, 11:58
	Да, именно outline. http://htmlbook.ru/css/outline пожжержывают все браузеры 0

@Tesla 30 / 30 / 5 Регистрация: 01.05.2012 Сообщений: 350 Записей в блоге: 1
	08.07.2012, 14:56
	а зачем нам ослик в нашем путишествее к звёздам ? 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	08.07.2012, 15:42
	мало ли, в деревне кто сидит юзает 6 ослика вопрос о кроссбраузерности - это для кого как в данном случае, имхо, можно полностью забить на этот ИЕ)) 0