Когда я пытаюсь открыть простой тестовый html в firefox, все в порядке, но при открытии его в Chrome или на мобильном устройстве я получаю эти белые пробелы между столбцами. Кто-нибудь понимает, почему?Как избежать пробелов в пробелах столбцов - маржа и отступы, установленные на 0, не работают

Если у вас есть идеи, как это решить, я бы очень признателен. Дело в том, что он отлично работает с firefox, однако Chrome и мобильные устройства не признают это как объект без каких-либо пробелов.

<div class="container"> 
    <div class="col-md-4 col-xs-4" style=" padding:0 !important; 
    margin:0 !important; 
    border:1px solid; 
"> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="11" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-10 col-xs-10" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="12" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="13" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="14" class="button" type="button" style=" background-color:green; 
    height:160px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-10 col-xs-10" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="15" class="button" type="button" style=" background-color:greeen; 
    height:160px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="16" class="button" type="button" style=" background-color:green; 
    height:160px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="17" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-10 col-xs-10" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="18" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="19" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
    </div> 
</div>

2016-12-21 Testing man

Кнопки изначально встроенные элементы. Поэтому они имеют пробелы справа и внизу, как слова в предложении.

Чтобы легко исправить это вам просто нужно, чтобы стиль кнопки с display: block;

Кстати, нет такого понятия, как display: flexbox; я думаю, что вы думали flex, но это не будет работать в любом случае, потому что display: flex; бы для контейнер, содержащий контент flex, состоящий из всех его детей.

источник

2016-12-21 20:09:43 haltersweb

Flexbox был unoffical синтаксис, используемый в 2011 году дисплея: Flex является то, что используется сейчас – Chase

спасибо @Chase. Не знал о синтаксисе 2011 года. – haltersweb

и не должно быть. Я натолкнулся на это в этом руководстве в качестве краткого упоминания. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Chase

Закрыть, но ваш рост и тип дисплея были выключены

Для вас кнопки их высоты были 5px короткие каждый, создавая таким образом, что захват увидели. Они также должны отображаться как тип block, учитывая то, как вы их использовали.

Так, например, boostrap автоматически устанавливал высоту контейнеров на 45px, а их высота по умолчанию составляла 40px. Это создало пробел в пробеле, который вы видели ранее.

button { 
height: 45px; 
display: block; 
}

Working Example

источник

2016-12-21 20:19:42 DominicValenciana

Спасибо Доминик, да, это правда. –

Как избежать пробелов в пробелах столбцов - маржа и отступы, установленные на 0, не работают

ответ

Закрыть, но ваш рост и тип дисплея были выключены

Working Example

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