Мне было интересно, знает ли кто-нибудь способ включения отступов или полей ширины пикселя в дизайн плавных столбцов без необходимости дополнительной разметки html.
В качестве дополнительной иллюстрации рассмотрим простой макет html/css, подобный этому:
<style>
.cont{width:500px;height:200px;border:1px solid black;}
.col{float:left;}
#foo{background-color:blue;width:10%;}
#bar{background-color:yellow;width:30%;}
#baz{background-color:red;width:60%;}
</style>
<div class="cont">
<div class="col" id="foo">Foo</div>
<div class="col" id="bar">Bar</div>
<div class="col" id="baz">Baz</div>
</div>
Это отображается правильно (не учитывая различные ошибки отображения CSS, о которых можно позаботиться). Однако, как только вы добавите, скажем, 10-пиксельный отступ к классу col, плавающие элементы перестанут отображаться встроенными. То же самое происходит, если вы хотите поместить границу в 3 пикселя к классу col. Я видел методы css, в которых люди будут использовать отрицательное поле, чтобы обратить добавленные пиксели, созданные из блочной модели, но это все равно не уменьшит ширину <div>. В общем, то, что я хочу, — это метод, который позволит мне сохранить ширину 10%, но 10px из этих 10% будут отступами (или отступом или чем-то еще).
