Вопрос:
Я хочу удалить пробелы между кнопками, так что, когда я, например, навешиваю над кнопкой NORMAL, между ним и кнопкой HARD не будет пробела. Как я могу это сделать и откуда берутся эти пробелы?
body { margin: 0; } #stripe { background-color: white; text-align: center; height: 50px; color: black; } button { border: none; background: none; text-transform: uppercase; height: 100%; font-weight: 700; color: black; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; outline: none; } button:hover { color: white; background: black; } .selected { color: white; background: black; }<div id=»stripe»> <button class=»mode»>Easy</button> <button class=»mode»>Normal</button> <button class=»mode selected»>Hard</button> </div>Лучший ответ:
Либо удалите пробелы и каретки, либо поместите комментарий HTML между ними.
body { margin: 0; } #stripe { background-color: white; text-align: center; height: 50px; color: black; } button { border: none; background: none; text-transform: uppercase; height: 100%; font-weight: 700; color: black; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; outline: none; } button:hover { color: white; background: black; } .selected { color: white; background: black; }<div id=»stripe»> <button class=»mode»>Easy</button><!— —><button class=»mode»>Normal</button><!— —><button class=»mode selected»>Hard</button> </div>Ответ №1
Браузеры всегда добавляют пробелы между некоторыми элементами, включая кнопки. Чтобы удалить их, вам необходимо установить размер шрифта равным нулю для своего родительского контейнера. Затем, чтобы восстановить размер текста внутри кнопок, установите для них размер шрифта.
#stripe { font-size: 0; } button { font-size: 14px; // Set font size that you need here } Ответ №2
Если используется начальная загрузка, можно сгруппировать кнопки вместе, поместив в div значение class= “btn-group”. Пример для v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Визуально может или не может быть то, что вы хотите. Имеет закругленные углы на левом и правом концах и прямую линию между кнопками. Может, возможно, рестайлинг.
Ответ №3
по умолчанию устанавливаются некоторые пропитки (paddings, margin, fonts..), попробуйте добавить файл сброса yss css, как обычный css файл
/* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: version: 3.1.0 build: 2026 */ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:»;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
или вы можете просто использовать
* {Обивка: 0px; поле: 0px;}
