Нежелательная прокладка вокруг кнопок. CSS

Добрый вечер. Мне нужна помощь в отношении CSS. Я знаю, что эта проблема была решена несколько раз, но по какой-то причине она не работает для моей программы. Этот скрипт предназначен для создания платы 8x8, при этом ячейки на досках являются одним из 8 различных цветов. Так что я собирался сделать, чтобы определить div, сосредоточенный на черном фоне. Внутри этого div будет мой совет. Поскольку 8 ячеек необходимы по длине и по ширине, я устанавливаю соответствующие атрибуты ширины и высоты кнопок, до 12,5%, т. Е. (100/8)% Я НЕ указывал явное дополнение, но все же все кнопки связаны некоторыми (в основном справа).Нежелательная прокладка вокруг кнопок. CSS

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
button::-moz-focus-inner 
 
/*Recommended fix. But not working*/ 
 

 
{ 
 
    border: 0; 
 
    padding: 0; 
 
} 
 
.c1 { 
 
    /*For coloring the buttons*/ 
 
    background-color: #cdaf95; 
 
} 
 
/*Here is the code for classes c2 -c7*/ 
 

 
.c8 { 
 
    background-color: #5e2612; 
 
} 
 
.col1 { 
 
    /*For defining the size of the buttons.*/ 
 
    width: 12.5%; 
 
    height: 12.5%; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
/*Here is code for classes col2-col7*/ 
 

 
.col8 { 
 
    width: 12.5%; 
 
    height: 12.5%; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
/*Board is the id of the division*/ 
 

 
#board { 
 
    height: 50%; 
 
    width: 50%; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    max-width: 400px; 
 
    max-height: 400px; 
 
    position: absolute; 
 
    margin: auto; 
 
    background-color: white; 
 
}

<body bgcolor="black"> 
 
    <style> 
 
    </style> 
 
    <div id="board"> 
 
    <button class="col1 c1"></button> 
 
    <button class="col2 c1"></button> 
 
    <button class="col3 c1"></button> 
 
    <button class="col4 c1"></button> 
 
    <button class="col5 c1"></button> 
 
    <button class="col6 c1"></button> 
 
    <button class="col7 c1"></button> 
 
    <button class="col8 c1"></button> 
 
    <button class="col1 c2"></button> 
 
    <button class="col2 c2"></button> 
 
    <!--And so on upto c8. Thats a total of 64 buttons forming an 8x8 board--> 
 
    <button class="col7 c8"></button> 
 
    <button class="col8 c8"></button> 
 
    </div> 
 
</body>

Любая помощь таким образом, было бы весьма признателен. Заранее благодарю.

источник

2016-09-16 Shashank Shet

Являются ли кнопки встроенными элементами? Может потребоваться, чтобы они блокировали или удаляли пробел вокруг них. –

Поделитесь рабочим примером. Код, которым вы делитесь, в порядке, без прокладки. –

Возможный дубликат [Лучший способ управления пробелами между строчными элементами списка] (http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items) –

Обновить ваш HTML, как это:

<body bgcolor="black"> 
    <div id="board"> 
<button class="col1 c1"></button><button class="col2 c1"><!-- 
--></button><!-- 
--><button class="col3 c1"></button><!-- 
--><button class="col4 c1"></button><!-- 
--><button class="col5 c1"></button><!-- 
--><button class="col6 c1"></button><!-- 
--><button class="col7 c1"></button><!-- 
--><button class="col8 c1"></button><!-- 
--><button class="col1 c2"></button><!-- 
--><button class="col2 c2"></button><!-- 
--><button class="col7 c8"></button><!-- 
--><button class="col8 c8"></button> 
    </div> 
</body>

просто добавить

<!-- -->

между

<button></button>

Убедитесь, что как этот

<button></button><!-- --><button></button>

не

<button></button> <!-- --><button></button> 
<button></button><!-- --> <button></button>

Смотрите здесь: https://jsfiddle.net/4vn4pv18/

источник

2016-09-16 14:38:50 Kuzuri

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

*{  
    padding:0; 
    margin:0; 
}

источник

2016-09-16 12:33:56

Я попробовал , Не работает. Справа справа не идет. –

Обеспечьте скрипку, и я могу быть более полезным –

Умм что такое скрипка? –

Одно из возможных решений:

/* just instead of writing 64 tags in a single row */ 
 
document.body.onload = function() { 
 
    var out = ''; 
 
    for(var i=1; i<=8; i++) 
 
for(var j=1; j<=8; j++) 
 
    out += '<button class="col'+j+' c'+i+'"></button>'; 
 
    document.getElementById('board').innerHTML = out; 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
button { 
 
    width: 12.5%; 
 
    height: 12.5%; 
 
    /* make sure that padding/border doesn't add up to dimensions */ 
 
    box-sizing: border-box; 
 
    /* remove vertical spaces between lines */ 
 
    vertical-align: bottom; 
 
} 
 
button::-moz-focus-inner 
 
/*really needed and working*/ 
 
{ 
 
    border: 0; 
 
    padding: 0; 
 
} 
 
.c1 { 
 
    /*For coloring the buttons*/ 
 
    background-color: #cdaf95; 
 
} 
 
/*Here is the code for classes c2 -c7*/ 
 

 
.c8 { 
 
    background-color: #5e2612; 
 
} 
 
.col1 { 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
/*Here is code for classes col2-col7*/ 
 

 
.col8 { 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
/*Board is the id of the division*/ 
 

 
#board { 
 
    height: 50%; 
 
    width: 50%; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    max-width: 400px; 
 
    max-height: 400px; 
 
    position: absolute; 
 
    margin: auto; 
 
    background-color: white; 
 
    /* make minimum height of lines of buttons as small as possible */ 
 
    line-height: 1px; 
 
}

<body bgcolor="black"> 
 
    <style> 
 
    </style> 
 
    <div id="board"> 
 
    </div> 
 
</body>

Основной трюк заключается в удалении между теги пробельные символы, включая разрывы строк (как уже упоминалось) и сделать высоту линии по умолчанию меньше высота кнопок (так как они ведут себя как рядный элементов -блок , они не могут сделать линию ниже, чем ее высота по умолчанию, только выше).

Но не лучше ли использовать Flexbox для этого макета?

источник

2016-09-16 14:58:11

Нежелательная прокладка вокруг кнопок. CSS

ответ

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