Обратный отступ с помощью CSS - PullRequest
Новая
       36

Обратный отступ с помощью CSS

3 голосов
/ 18 декабря 2010

Я работаю над сайтом и пробую новые вещи с помощью CSS.Больше для "чутья", чем что-либо еще, но я хочу, чтобы сайт выглядел хорошо.:)

alt text

На картинке выше я хочу, чтобы линия была «внутри» белого поля с надписью «Добро пожаловать в Морию», поэтому выглядит так, будто белая линия/ из / из коробки и тянется поперек.По сути, я хочу, чтобы белая линия была на несколько пикселей ниже.(или все остальное на несколько пикселей.)

Это HTML-код раздела: 

<div class = "paragraphSection">
    <span class="textHeading">Welcome to Moria</span><span class="mainBodyText">
    Moria is a Minecraft server, which we have evolved into fun place to 
    build, talk, and fight. Everyone is welcome to join us play!  Of course, you should probably 
    read this page to understand what is happening, because it's a little more then 
    just Minecraft.</span>
    </div>

И это CSS, который я пытаюсь использовать: 

.paragraphSection {
    border-top-style:solid;
    border-top-width:1px;
    border-color:white;
    padding-top:0px;

}

.textHeading {
    font-size:2em;
    padding-left:3px;
    padding-right:3px;
    background-color:white;
    padding:-10px;

    -moz-border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
}

То, что я пытался сделать, это просто сделать элемент заполнения отрицательным, чтобы он шел вверх, а не вниз.Однако это не сработало вообще.Я думал, что вы могли бы сделать это, но, видимо, нет.Поэтому я не уверен, как сделать так, чтобы граница раздела Section перемещалась вниз.

Ответы [ 3 ]

2 голосов
/ 09 сентября 2014

Я бы выбрал отрицательное верхнее поле: 

.textHeading {
  margin-top: -5px;
  ...
}

Отрицательное заполнение запрещено в соответствии со спецификацией и поэтому должно игнорироваться:

В отличие от свойств поля, значениязначения заполнения не могут быть отрицательными.

Источник: CSS 2.1 Спецификация: 8.4 Модель бокса: Свойства заполнения

2 голосов
/ 18 декабря 2010

Попробуйте это: 

.textHeading{
  position:relative;
  top:-5px; //Adjust it according to what looks good to you.
  .
  .
}
0 голосов
/ 18 декабря 2010

Другие стили влияют на эти блоки.

Смотрите мой пример: http://jsfiddle.net/DFEyj/ Выглядит как задумано.

Также обратите внимание, что ваш синтаксис очень многословен.

...