CSS - проблема с размером окна

Я не нашел ответа на свой вопрос, даже если он действительно прост. Я использую размер поля свойства CSS, чтобы сделать «внутреннюю границу» для div (который на самом деле является <a>...</a>)

.myDiv{ 
       box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       border: 2px solid #3498db;
}

Но похоже, что он вообще не работает, поскольку граница такая же, но без свойств рамки. У кого-нибудь есть ответ?

Просто чтобы быть уверенным в том, что я делаю. Я хочу получить <a> "внутреннюю границу". Я, очевидно, знаю свойство border: ...;, но оно делает элемент больше, а я этого не хочу. Я хотел бы иметь что-то вроде border: -2px solid #3498db.

[EDIT] Я нашел решение. Описание в комментариях.


web html css border-box
person jseiller    schedule 06.11.2013    source источник
comment
Это не то, что делает box-sizing. О чем вообще ты говоришь?   -  person SLaks    schedule 07.11.2013
comment
Хорошо, тогда я неправильно понял то, что читал раньше. Я хочу сделать границу для div, который находится внутри div.   -  person jseiller    schedule 07.11.2013
comment
box-sizing: border-box должно работать так: stackoverflow .com/questions/9601357/   -  person 3dgoo    schedule 07.11.2013
comment
Проблема в том, что мой div на самом деле представляет собой просто ‹a›‹/a› и не имеет фиксированного размера. Любое решение?   -  person jseiller    schedule 07.11.2013
comment
@SLaks - Я хочу добавить границу к ‹a›. Но я хочу, чтобы он был внутри, а не увеличивал элемент ‹a›. Вы понимаете, что я имею в виду?   -  person jseiller    schedule 07.11.2013
comment
Если ваш тег ‹a› является строчным элементом, добавление рамки всегда будет увеличивать его размер, и размер окна здесь не поможет. Кроме того, вам нужно указать высоту для работы box-sizing. Без высоты граница все еще находится за пределами блока и влияет на рендеринг.   -  person Chandranshu    schedule 07.11.2013
comment
Спасибо за Ваш ответ. Вы сделали для меня пограничную рамку очень ясной. ;)   -  person jseiller    schedule 07.11.2013
comment
Привет, ребята. Я действительно нашел ответ на свой вопрос. Что я хотел сделать, так это добавить внутреннюю нижнюю границу 2px к <a>...</a>. Что я сделал, так это уменьшил на 2 пикселя нижнюю часть отступа a, а затем добавил нижнюю границу. Вот результат: i.stack.imgur.com/7tjcX.png Большое спасибо. .   -  person jseiller    schedule 07.11.2013

Ответы (2)


arrow_upward
1
arrow_downward

Использование box-sizing: border-box для встроенного элемента без ширины не сделает границу внутренней по размеру элемента.

Вместо этого вы можете использовать псевдоэлемент :after, чтобы сделать границу поверх элемента.

HTML

This is some <span class="textBorder">text</span> and then some more.

CSS

.textBorder {
    background: #ffff99;
    position: relative;
}
.textBorder:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0,0,0,0.5);
}

Демо

person 3dgoo    schedule 06.11.2013

arrow_upward
1
arrow_downward

Самый простой способ — поместить <span> внутри <a>, а затем обрамить <span>. Затем установите необходимые отступы/поля, либо <a>, либо <span>.

person Adrian Roworth    schedule 06.11.2013
comment
Спасибо за Ваш ответ. Это не решит мою проблему, но, безусловно, поможет мне в будущем. Спасибо ! - person jseiller; 07.11.2013