Как между колонками сделать отступ

@HellGirl4eg · Регистрация: 14.06.2017

Студворк — интернет-сервис помощи студентам

Необходимо создать колонки одинаковой высоты как показано на картинке
Ширина колонок в процентах и рекомендуется использовать следующий каркас:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <div class="col-5">
    …
  </div>
  <div class="col-5">
    …
  </div>
  <div class="col-2">
    …
  </div>  
</div>

Сделала сетку из 12 колонок, как между колонками сделать отступ?

@mastos · 14.06.2017, 23:35

flexbox, хорошо решит эту задачу

@SergioSup · 15.06.2017, 13:59

padding или margin по бокам

@Evgeniy55 · 15.06.2017, 14:58

песочница: https://codepen.io/evgeniyprow... itors=1100

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrap">
  <div class="col v1_mod">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse aut praesentium sequi eaque reiciendis quae, tempore soluta veniam numquam asperiores reprehenderit ullam illum deleniti eveniet ipsum non, quos labore eius tempora dolore quia, id harum. Nulla ut iure minima architecto ipsam porro. Totam est atque animi illo eligendi sapiente delectus.</p>
  </div>
  <div class="col v2_mod"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, officia deserunt quasi repudiandae facilis, voluptatibus facere quisquam corporis iste. Eligendi doloremque iste error officia. Magnam recusandae, doloribus sequi magni unde accusantium, ipsam qui aliquid, eaque sapiente totam nobis distinctio explicabo nam quam quibusdam. Officiis totam libero, autem incidunt reiciendis, architecto at fuga laudantium quasi beatae laborum ad vitae, repellat. Accusantium error quibusdam delectus, sint harum fugit corrupti a aspernatur quasi esse dolores facere eos in architecto unde dolorum non! Totam autem, facilis ad laboriosam, repudiandae numquam asperiores distinctio nemo nam! Cumque totam repellat ipsa soluta laboriosam quaerat assumenda, dignissimos cupiditate quis rem atque id doloremque nihil nemo sunt, velit optio facilis. Corporis exercitationem ea provident, assumenda minima temporibus cupiditate similique explicabo a quaerat quasi illum culpa aspernatur ducimus est dignissimos quisquam dicta fuga nostrum fugiat dolorum excepturi cumque. Sequi nihil officia qui autem cum sed, non accusantium reprehenderit laboriosam earum recusandae tenetur adipisci placeat eius cupiditate ducimus quod aliquid quis ipsa, neque ab. Natus, reiciendis placeat libero vel, numquam ipsa rem. Doloremque eius mollitia modi! Dolore deleniti saepe beatae libero magni sequi asperiores, error sapiente quaerat labore fugiat repellendus laudantium doloribus, deserunt aut culpa dolorum ducimus quia, minus? Explicabo magni aspernatur, sit commodi possimus fugiat tempore fuga! Vero, autem, rerum quaerat quo quidem iure dolorum sapiente nulla quisquam! Sequi similique deleniti et doloribus delectus consectetur pariatur sapiente quibusdam, perferendis repudiandae at eveniet molestiae quas omnis error nobis dolorum placeat autem reprehenderit vitae atque iure magni nesciunt iste! Cumque, porro! Facilis, aperiam eum. Esse, quisquam, pariatur voluptate ad aliquam eius sed distinctio voluptas quam ipsum praesentium accusantium iste voluptatem quis inventore. Placeat illo, alias vel nisi laboriosam labore molestiae consectetur quam perspiciatis cupiditate officia necessitatibus nobis soluta saepe quas omnis eos sit. Dicta temporibus modi quia qui numquam expedita dignissimos?</p>
  </div>
  <div class="col v3_mod"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam similique cupiditate deleniti libero tenetur, veritatis nihil aspernatur repellendus sed quis? Atque, repudiandae ab reiciendis eius cum dolore ex aut adipisci ad dolorem aperiam natus porro. Suscipit, veritatis dignissimos fugiat explicabo voluptas odio cumque deleniti, unde, molestias error deserunt dolores quas hic magnam sit illo, facilis! Veniam temporibus repellendus molestias deleniti quibusdam eius enim! Aut voluptatem similique accusantium! Obcaecati voluptatibus repellat perferendis, magni aliquam praesentium ad dolore nihil voluptate rerum sunt mollitia ducimus, neque velit, illum. Voluptas, fugit? Numquam, mollitia eum laboriosam rem, delectus veniam, recusandae quis minus incidunt laborum nobis?</p>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
* {
  box-sizing: border-box;
}
 
body {
  background-color: #ccc;
}
 
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 0 -20px -20px;
  padding: 20px;
}
 
.col {
  margin: 0 0 20px 20px;
  padding: 20px;
  background: #fff;
}
.col.v1_mod {
  flex: 3 1 400px;
}
.col.v2_mod {
  flex: 3 1 400px;
}
.col.v3_mod {
  flex: 1 1 200px;
}

Добавлено через 13 минут
если вместо маргинов нужны только паддинги из за бордер-бокса, то:

песочница: https://codepen.io/evgeniyproweb/pen/OgbMRX

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap">
  <div class="col_wrap v1_mod">
    <div class="col">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse aut praesentium sequi eaque reiciendis quae, tempore soluta veniam numquam asperiores reprehenderit ullam illum deleniti eveniet ipsum non, quos labore eius tempora dolore quia, id harum. Nulla ut iure minima architecto ipsam porro. Totam est atque animi illo eligendi sapiente delectus.</p>
    </div>
  </div>
  <div class="col_wrap v2_mod"> 
    <div class="col">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, officia deserunt quasi repudiandae facilis, voluptatibus facere quisquam corporis iste. Eligendi doloremque iste error officia. Magnam recusandae, doloribus sequi magni unde accusantium, ipsam qui aliquid, eaque sapiente totam nobis distinctio explicabo nam quam quibusdam. Officiis totam libero, autem incidunt reiciendis, architecto at fuga laudantium quasi beatae laborum ad vitae, repellat. Accusantium error quibusdam delectus, sint harum fugit corrupti a aspernatur quasi esse dolores facere eos in architecto unde dolorum non! Totam autem, facilis ad laboriosam, repudiandae numquam asperiores distinctio nemo nam! Cumque totam repellat ipsa soluta laboriosam quaerat assumenda, dignissimos cupiditate quis rem atque id doloremque nihil nemo sunt, velit optio facilis. Corporis exercitationem ea provident, assumenda minima temporibus cupiditate similique explicabo a quaerat quasi illum culpa aspernatur ducimus est dignissimos quisquam dicta fuga nostrum fugiat dolorum excepturi cumque. Sequi nihil officia qui autem cum sed, non accusantium reprehenderit laboriosam earum recusandae tenetur adipisci placeat eius cupiditate ducimus quod aliquid quis ipsa, neque ab. Natus, reiciendis placeat libero vel, numquam ipsa rem. Doloremque eius mollitia modi! Dolore deleniti saepe beatae libero magni sequi asperiores, error sapiente quaerat labore fugiat repellendus laudantium doloribus, deserunt aut culpa dolorum ducimus quia, minus? Explicabo magni aspernatur, sit commodi possimus fugiat tempore fuga! Vero, autem, rerum quaerat quo quidem iure dolorum sapiente nulla quisquam! Sequi similique deleniti et doloribus delectus consectetur pariatur sapiente quibusdam, perferendis repudiandae at eveniet molestiae quas omnis error nobis dolorum placeat autem reprehenderit vitae atque iure magni nesciunt iste! Cumque, porro! Facilis, aperiam eum. Esse, quisquam, pariatur voluptate ad aliquam eius sed distinctio voluptas quam ipsum praesentium accusantium iste voluptatem quis inventore. Placeat illo, alias vel nisi laboriosam labore molestiae consectetur quam perspiciatis cupiditate officia necessitatibus nobis soluta saepe quas omnis eos sit. Dicta temporibus modi quia qui numquam expedita dignissimos?</p>
    </div>
  </div>
  <div class="col_wrap v3_mod"> 
    <div class="col"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam similique cupiditate deleniti libero tenetur, veritatis nihil aspernatur repellendus sed quis? Atque, repudiandae ab reiciendis eius cum dolore ex aut adipisci ad dolorem aperiam natus porro. Suscipit, veritatis dignissimos fugiat explicabo voluptas odio cumque deleniti, unde, molestias error deserunt dolores quas hic magnam sit illo, facilis! Veniam temporibus repellendus molestias deleniti quibusdam eius enim! Aut voluptatem similique accusantium! Obcaecati voluptatibus repellat perferendis, magni aliquam praesentium ad dolore nihil voluptate rerum sunt mollitia ducimus, neque velit, illum. Voluptas, fugit? Numquam, mollitia eum laboriosam rem, delectus veniam, recusandae quis minus incidunt laborum nobis?</p>
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
* {
  box-sizing: border-box;
}
 
body {
  background-color: #ccc;
}
 
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 0 -20px -20px;
  padding: 20px;
}
 
.col_wrap {
  padding: 0 0 20px 20px;
}
.col_wrap.v1_mod {
  flex: 3 1 400px;
}
.col_wrap.v2_mod {
  flex: 3 1 400px;
}
.col_wrap.v3_mod {
  flex: 1 1 200px;
}
 
.col {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@mastos 0 / 0 / 0 Регистрация: 14.06.2017 Сообщений: 8
	14.06.2017, 23:35
	flexbox, хорошо решит эту задачу 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	15.06.2017, 13:59
	padding или margin по бокам 0