0

Добрый день.

Есть блок с фоном. В блоке есть текст. Размер блока тянется в зависимости от содержимого.

https://jsfiddle.net/skywave/6zfcb7st/

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

https://jsfiddle.net/skywave/umqop1qs/ (только тут не тянется)

Спасибо.

P.S. пробовал margin-bottom: -100px;. Не помогло.

2
  • > "чтобы текст немного выходил за пределы блока вниз" -- чтобы последний параграф выходил за границы ?
    – Arsen
    19 дек 2017 в 13:21
  • @Arsen да, и налезал на все что снизу, если есть. Но это может быть не 1 параграф, а 2, или полтора, или это может быть картинка
    – Skywave
    20 дек 2017 в 4:56

2 ответа 2

1

Можно с помощью отрицательного margin-bottom. Только нужно родителю задать padding-bottom или border-bottom, хотя бы 1px.

Ну и родителю положительный margin-bottom, чтобы отталкивал все, что после него, иначе другие элементы будут на него наезжать.

.outer {
  background: #000;
  margin-bottom: 50px;
  padding-bottom: 1px;
}

.container {
  margin-bottom: -50px;
}

p {
  color: #999;
}
<div class="outer">
  <div class="container">
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
  </div>
</div>

2
  • Спасибо. Работает во всех нужных браузерах. Не знаете с чем связана необходимость в padding у родительского блока?
    – Skywave
    20 дек 2017 в 4:55
  • 1
    @Skywave думаю, это связано с "выпаданием" вертикальных внешних отступов. Если у дочернего поставить вертикальный внешний отступ, то он "выпадет" из родителя, если у родителя нет ограничивающих факторов. В данном случае этим фактором выступает padding, чтобы предотвратить "выпадание". 20 дек 2017 в 17:07
0

.outer {
  height: 200px;
  background: #000;
  position: relative;
}

.container {
  position: absolute;
  bottom: -1.5em;
}

p {
  color: #999;
}
<div class="outer">
  <div class="container">
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
    <p>Текст</p>
  </div>
</div>

1
  • Надо, чтобы текст был у верхнего края .container
    – Skywave
    20 дек 2017 в 4:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.