Запуталась с таблицей

@Alenushka · Регистрация: 30.06.2015

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

Прошу помощи в таблице
http://codepen.io/anon/pen/wayjwr

Как сделать расстояние в #table .plan_tab равное 30 px без помещения туда объекта и почему внизу картинки есть белая полоска?

HTML5

<div id="table">
<div class="plan">
<img src="http://stefanimhoff.de/assets/images/artikel/css-peter-griffin-meme-c681f5f6.jpg" height="300px" width="300"></div>
  <div class="plan_tab"></div>
<div class="plan">
<img src="http://stefanimhoff.de/assets/images/artikel/css-peter-griffin-meme-c681f5f6.jpg" height="300px" width="300"></div> 
  <div class="plan_tab"></div>
  <div class="plan">
<img src="http://stefanimhoff.de/assets/images/artikel/css-peter-griffin-meme-c681f5f6.jpg" height="300px" width="300"></div> 
  
</div>

CSS

#table {
width: 960px;
display: table;
border: 1px solid #505050;
}
#table .plan {
padding: 0px;
width: 300px;
float: left;
}
#table .plan_tab {
width: 30px;
float: left;
  }

Комментарий модератора

Весь код размещать в сообщении
ссылка на песочницу только как дополнение

@whiteapps · 02.07.2015, 20:05

Alenushka,

CSS

#table {
width: 960px;
display: table-row;
border: 1px solid #505050;
}
#table .plan {
padding: 0px;
width: 300px;
display: table-cell;
}
#table .plan_tab {
width: 30px;
display: table-cell;
  }

@andrey1994 · 02.07.2015, 20:09

почему внизу картинки есть белая полоска?

Это остаток таблицы. Чтобы убрать - задаете высоту таблице, а изображениям ставите высоту: 100%;

@Alenushka · 02.07.2015, 20:13 **[ТС]**

С таблицей понятно, а вот внизу фотографии все ровно белая полоса.

@whiteapps · 02.07.2015, 20:18

Alenushka,

CSS

#table {
width: 960px;
height: 300px;
border: 1px solid #505050;
}
#table .plan {
padding: 0px;
width: 300px;
display: table-cell;
}
#table .plan_tab {
width: 30px;
display: table-cell;
  }

@Alenushka · 02.07.2015, 20:25 **[ТС]**

Прошу посмотреть ссылку выше там есть подсветка, все ровно видно маленькое расстояние.

Добавлено через 3 минуты
То есть нужно 3 сверху и 3 внизу блока без разрыва.

@whiteapps · 02.07.2015, 20:33

Alenushka,

HTML5

<div id="table">
<div class="plan">
    <img src="http://stefanimhoff.de/assets/images/artikel/css-peter-griffin-meme-c681f5f6.jpg" height="300px" width="300px" />
</div>
    
<div class="plan_tab"></div>
  
<div class="plan">
    <img src="http://stefanimhoff.de/assets/images/artikel/css-peter-griffin-meme-c681f5f6.jpg" height="300px" width="300px"/>
</div> 
 
<div class="plan_tab"></div>
  
<div class="plan">
    <img src="http://stefanimhoff.de/assets/images/artikel/css-peter-griffin-meme-c681f5f6.jpg" height="300px" width="300px"/>
</div> 
  
  
</div>

CSS

#table {
  height: 300px;
  border: 1px solid #505050;
  width: 960px;
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}
#table .plan {
  padding: 0px;
  width: 300px;
  display: inline-block;
  height: 300px;
}
#table .plan_tab {
  background: #505050;
  width: 30px;
  display: inline-block;
  height: 300px;
  }

@newJS · 04.07.2015, 06:03

Сообщение от Alenushka

почему внизу картинки есть белая полоска?

потому что картинка это строчный элемент, и внизу остаётся несколько пикселей под "хвостики" символов

Если тег img лежит внутри блочного элемента (в том числе элемента, ставшего блочным благодаря правилам display:block или float:left/right), то в большинстве популярных браузеров сразу под img появляется странный отступ в несколько пикселей.
лечение:
Для того, чтобы отступ пропал, достаточно (на выбор) прописать для img или display:block
или
vertical-align:top/middle/bottom

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	02.07.2015, 20:09	3
	почему внизу картинки есть белая полоска? Это остаток таблицы. Чтобы убрать - задаете высоту таблице, а изображениям ставите высоту: 100%; 0

@Alenushka 1 / 1 / 0 Регистрация: 30.06.2015 Сообщений: 31
	02.07.2015, 20:13 [ТС]	4
	С таблицей понятно, а вот внизу фотографии все ровно белая полоса. 0

@Alenushka 1 / 1 / 0 Регистрация: 30.06.2015 Сообщений: 31
	02.07.2015, 20:25 [ТС]	6
	Прошу посмотреть ссылку выше там есть подсветка, все ровно видно маленькое расстояние. Добавлено через 3 минуты То есть нужно 3 сверху и 3 внизу блока без разрыва. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	04.07.2015, 06:03	8
	Сообщение от Alenushka почему внизу картинки есть белая полоска? потому что картинка это строчный элемент, и внизу остаётся несколько пикселей под "хвостики" символов Если тег img лежит внутри блочного элемента (в том числе элемента, ставшего блочным благодаря правилам display:block или float:left/right), то в большинстве популярных браузеров сразу под img появляется странный отступ в несколько пикселей. лечение: Для того, чтобы отступ пропал, достаточно (на выбор) прописать для img или display:block или vertical-align:top/middle/bottom 0

Запуталась с таблицей

Решение