Какво причинява това произволно бяло пространство?

В крайна сметка зададох свойствата за показване на някои div в един от моите дизайни съответно на таблица/клетка на таблица, за да се възползвам от поддръжката на текст за вертикално подравняване. Сега обаче имам малко празно пространство, което се боря да осмисля.

Моят код (JsFiddle: http://jsfiddle.net/p8zw2/):

HTML

<div class="container">
    <p>Test</p>
    <div class="mytable">
        <div class="tablecell">test</div>
        <div class="tablecell">test</div>
        <div class="tablecell">test</div>
    </div>
    <p>Test</p> </div>
</div>

CSS

.container { width: 100%; background-color: #ff0000; }

.mytable { display: table; background-color: #4d4d4d; width: 94%; padding-left: 3%; padding-right: 3%; }

.tablecell { display: table-cell; width: 33%; }

Както ще видите в jsfiddle, червеният фон сега изтича в десния край, където не трябва. Подпълването на div 'mytable' е 3% от всяка страна (общо 6%), така че задаването на ширината на 94% трябва да гарантира, че запълва контейнера.

Задаването на свойството за показване обратно на „блокиране“ го кара да работи както очаквах, но след това губя функционалността си за вертикално подравняване - така че това доказва, че по един или друг начин се свежда до режима на показване на таблицата.

Опитах всякакви начини да деактивирам всички други подложки, полета и граници, които може да го причиняват, но не успях. Firebug/Chrome dev tools не хвърлят повече светлина върху проблема.

Не търся заобиколни решения (като line-height и т.н. за вертикално подравняване на текст, бих искал да опитам и да разбера какъв е проблемът с този конкретен код).

Пропуснал ли съм нещо очевидно/някакви идеи?


html css whitespace css-tables
person Anonymous    schedule 12.12.2013    source източник

Отговори (6)


arrow_upward
2
arrow_downward

Нулирайте полетата на тялото на 0px, след което трябва да премахнете padding-left и padding-right от класа .mytable и да го добавите директно към .tablecell, накрая задайте ширината на mytable на 100%. Променен CSS по-долу;

 .container { width: 100%; background-color: #ff0000; }

 .mytable { display: table; background-color: #4d4d4d; width: 100%;  }

 .tablecell { 
   display: table-cell; width: 33%;
   padding-left: 4%;
   padding-right: 4%;
  }

 body{

margin:0 auto;
padding:0;
 }

Пример за Jsfiddle

person yardie    schedule 12.12.2013

arrow_upward
0
arrow_downward 

*{margin:0;padding:0;}

добавете тези редове код върху вашия файл style.css, това ще реши проблема ви, това е решение за различни браузъри, това се нарича нулиране на css погледнете тук за подробности

person Java Student    schedule 12.12.2013

arrow_upward
0
arrow_downward

Актуализирах вашата цигулка, за да използвате border-collapse:collapse. Трябва да прочетете повече за подложките в таблиците (без да се обиждате, просто за да получите представа как да работите с display:table и display:table-cell). Ето http://jsfiddle.net/p8zw2/3/ . Трябва да добавите подложка към съдържанието на първата и третата клетка.

person n1kkou    schedule 12.12.2013

arrow_upward
0
arrow_downward

Вашият div вече се държи като таблица: не можете да поставите подложка и по подразбиране клетките са "раздалечени" една от друга. Ето защо с div с ширина 94% изглежда, че е повече.

Трябва да направите границата свита и да зададете ширината на вашия div на 100%.

.mytable { display: table; background-color: #4d4d4d; width: 100%; border-collapse: collapse; }

Би трябвало да работи.

person brian    schedule 12.12.2013

arrow_upward
0
arrow_downward

Повечето браузъри имат поле по подразбиране за елемент body. Зависи от браузъра. Някои имат само подплата, други само марж за тялото.

можеш ли да опиташ това,

*{    
    margin:0;
    padding:0;
 }

Демо: http://jsfiddle.net/p8zw2/5/

body{    
    margin:0;
    padding:0;
 }

Демо: http://jsfiddle.net/p8zw2/2/

person Krish R    schedule 12.12.2013

arrow_upward
0
arrow_downward

.tablecell{width:33%} причинява проблема.

33% * 3 = 99%, 1% е разликата.

Дадох сив фон на .container вместо .mytable и червен фон на p.

Опитвам:

.container{width:100%;background-color:#4d4d4d;}
.mytable{display:table;width:94%;padding-left:3%;padding-right:3%;}
p{background-color:#f00;margin:0;padding:10px 0;}

Актуализиран fiddle тук.

person Hiral    schedule 12.12.2013