文字两端对齐的问题

Question

文字是在<section>下的<footer>里，text-align设置为justify，<footer>的margin左右为0，但是实际上文字的右边会有一段空隙，左右两边距离浏览器边界不相等，这个问题要怎么解决？而且文字中英文的显示也很不理想

这个问题折磨我好久了！拜托大神求救啊！QAQ

<section id="banner">
<div class="inner">
<footer>
<p>文字</p>
</footer>
</div>
</section>

css:

section {
margin: 0;
}
#banner2 {
padding: 6em 0;
text-align: center;
}
#banner2 .inner {
background: none;
display: block;
padding: 0 1.5em;
text-align: center;
}

#banner2 .inner footer {
margin-top: 2em;
margin-right: auto;
margin-left: auto;
text-align: center;
}

#banner2 .inner p {
text-align: justify;
margin: 0;
}

---

最新尝试：
改用em设置宽度，结果好像更加惨不忍睹了

---

Answer 1

针对LZ的更新：

之前的回答没有说明letter-spacing的存在，跟我合作的设计师的排版很少用到letter-spacing……没想到LZ就用到了。

如果letter-spacing大于零，并且也是使用em的话，依然是可以使用width的em单位作宽度控制的：

width: 一行你想要的字数×(1+letter-spacing)

要让英文部分也两端对齐，需要在中文和英文的连接处加上空格。例子如下：

http://jsfiddle.net/9a6hw/6/

---

以下trick可以缓解：

1. em宽度 + 水平居中

中文字体没有kerning一说，一个中文字符就是1em。
设置容器宽度时用em做单位，比较适合中文排版。

http://jsfiddle.net/9a6hw/1/

（没有完全严格地两端对齐，是由于禁则的缘故，逗号不能作为一行的起始。逗号把最后一个字拐到了第二行。浏览器应该还没有实现平面排版中的标点悬挂）

2. 针对text-align: justify优化英文显示

text-align: justify最坑爹的地方在于……它对两端对齐的处理是依赖于空格的。

http://jsfiddle.net/9a6hw/5/

JSFIDDLE的下方示例的两端对齐的实现方式……其实就是在text-align: justify的基础上，在中英文连接部分添加了空格。

除了手动在中英文连接部分添加空格以外，还可以用JS自动处理文本

3. 面向未来

text-align: justify的定义既是“文本将按照‘text-justify’属性所指定的方法两端对齐。”

text-justify原本是IE系列的私有定义，现已加入CSS3超值午餐草案，见W3C Working Draft。

text-spacing（见W3C Working Draft）则可以帮助我们自动在表意字和非表意字之间创建额外空格（而不是像上面一样惨兮兮的JS加空格）。

面向未来的浏览器实现，符合我们预期的，是这样的代码：

p {
    text-align: justify;
    -ms-text-justify: inter-ideograph;
    text-justify: inter-ideograph;
    text-spacing: ideograph-alpha;
}

可惜它们基本上没有被支持。

Answer 2

HTML/CSS不是用来做精确排版的系统，如果你有这方面的需求，请用PostScript/PDF，用相应的工具如TeX或者Adobe Illustrator等。

Answer 3

text-align:justify

Answer 4

盒子padding:xx