Текст с выходом за пределы блока

312

20 декабря 2017, 20:41

Добрый день.

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

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

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

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

Спасибо.

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

Answer 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>

Answer 2

.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>