Изображение: 
Итак, прямо сейчас между двумя кнопками есть небольшая гамма. и я хотел бы, чтобы кнопки делили средний край или, по крайней мере, касались друг друга (если они касаются друг друга, изменение CSS, поэтому похоже, что они разделяют край, не сложно)
Но маржа влево/вправо, похоже, ничего не делает. Что здесь происходит?
Две кнопки имеют пробел между ними из-за возврата и отступа, который вы использовали для форматирования HTML.
Просто плавайте оба контейнера: http://jsfiddle.net/TRVfh/19/
.redline_changes, .redline_comments{
margin-left: 0px;
margin-right: 0px; float: left;
}
Пространство вызвано новой строкой и отступом между двумя внутренними div. Удаление пробела приведет к тому, что два ближе.
<div class="shell" style="width: 950px; ">
<div class="redline_changes">
<a href="#">Left Button</a>
</div><div class="redline_comments">
<a href="#">Right Button</a>
</div>
</div>
Просто удалите любые пробелы между DIVs:
<div class="redline_changes">
<a href="#">Left Button</a>
</div><div class="redline_comments">
<a href="#">Right Button</a>
</div>
Похоже на лишние пробелы в HTML. http://jsfiddle.net/TRVfh/18/
Попробуйте добавить display:inline (вместо текущего display:inline-block;)
Протестировано в Chrome, Firefox, Opera и IE.
Я исправил это, добавив margin-left: -5px ко второй кнопке.
Это символ пробела, который автоматически вставлен путем нормализации. К сожалению, для его исправления вам нужно будет испортить форматирование кода:
</div><div class="redline_comments">
<a href="#">Right Button</a>
</div>
использовать display:flex; flex означает гибкую компоновку.
вы можете использовать spacer со всеми 0
.example-spacer {
flex: 0 0 0;
}
or
.example-spacer {
flex: 0 0 auto;
}
or
.example-spacer {
flex: auto;
}
попробуйте это для всех кнопок:
margin-left: 0px;
margin-right: 0px;
display:flex;
float: left;