Сокращение div до размера содержимого

Привет, мне было интересно, есть ли способ уменьшить размер div до его размера содержимого (я спрашиваю, потому что у меня цвет фона, и он выглядит просто уродливо, когда высота текста намного короче, чем остальные из div, который заполнен цветом? Когда я добавляю высоту: auto, это не уменьшает размер контента, и я имею в виду текст, который у меня есть. Есть ли способ предоставить комнату за кумулятивной высотой текста? Как если бы высота div была на 10 или 15 процентов выше, чем общая высота содержимого? Если вы видите, что я помещаю margin: auto здесь, но на самом деле это не имеет эффекта. Сейчас этот div находится в flexbox, но я не подумайте, что это вызывает проблему. Теперь в фрагменте соотношение высоты прекрасно, но когда я делаю это в большем окне, высота div полностью затмевает текст из-за цвета/высоты div. не увеличивать lin е высоты. Или мне просто нужно делать проб и ошибок и просто изменять значения высоты, пока я не найду что-то?Сокращение div до размера содержимого

-Спасибо

.middle { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    order: 2; 
 
    justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.middle div { 
 
    height: auto; 
 
\t 
 
} 
 

 
.box2 { 
 
\t 
 
\t background-color: #F0ECCA; 
 
\t 
 
\t 
 
}

<div class="middle"> 
 
     
 
     \t <div class="box"> 
 
      \t <h2> Overview <h2> 
 
       
 
      </div> 
 
      
 
      <div class="box2"> 
 
       <p>"Yo yo dab dab sample sample sample 
 
       this is a sample sentence this is a sample sentence this is a sample sentence this is a sample sentence this is a sample sentence this is a sample sentence. 
 
       </p> 
 
       
 

 
      </div> 
 

 
    </div>

источник

2016-10-03 Shinji-san

Помогите мне здесь, вы хотите пространство 10-15px вокруг содержимого (например, вы видите, что цвет фона расширяется на 10-15px из содержимого)? Или вы хотите, чтобы цвет фона останавливался по краям содержимого (т. Е. Нет прокладки вокруг)? – UncaughtTypeError

Ну, пиксели потребовали бы, чтобы я нашел точную высоту содержимого. Даже не уверен в том, как это сделать. Пиксели или процент в порядке, но я думаю, что другой парень получил его. Полностью забыл, что я могу настроить прописку/маржу, lol. –

div, который содержит текст делает именно то, что вы ожидаете. Исключительный цвет фона фактически исходит от тега <p>. Установка margin-top и margin-bottom как для 0 для этого элемента будет делать то, что вы ищете.

Зачем нам нужно вручную менять поля <p>? <p> теги имеют поля по умолчанию, предоставляемые браузером.

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

источник

2016-10-03 20:42:37 davidatthepark

О, я вижу. Хорошо, большое спасибо. –

Сокращение div до размера содержимого

ответ

Смежные вопросы