控制文本与边框的距离，要使用css的内边距属性padding来实现。请看下方示例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>angular demo</title>
</head>
<body>
<style type="text/css">
.box{width:150pxheight:150pxborder:1px solid #333padding:10pxfont-size:12px}
</style>
<div class="box">
这里是测试的文字，修改padding值就可以改变文字距离边框的距离了。
</div>
</body>
</html>
示例中设置的padding值为10px；文字距离边框的距离即为10px。可通过修改值来改变距离。实现效果如下图：
css外边距自动合并 导致的一个bug，你的解决方法是对的，或者加内边距也可，阻止外边距自动合并发生就行了，你可以自己百度下相关知识。这个bug不是普遍的，有些浏览器有，有些没有(记不着哪些有了，你可以自己测试)
外边距自动合并的原理：
<div id="txt">
<p>一篇文章，结构很可能是这样</p>
<p>这篇文章有很多段落，这是第二段文字</p>
<p>段落.......</p>
</div>
这时候为了文字排版好看，通常都会给给 p 来点上、下外边距，让段落间拉出段空白来。比如给 p 上、下各 15px 的外边距：
#txt p{margin:15px 0}
这时两个挨着的段落之间的空白部分距离是多少？
第一段下边距 15px + 第二段上边距 15px = 30px 加起来等于 30px 对不？等于 30px 的话排版就难看了。
实际上浏览器为了解决这个排版问题，把这两个边距强制合并了(而不是简单的做加法运算)，实际上下两段之间距离是：15px
这个就是：外边距自动合并，是一个很有用的功能，基本上能解析 css 的浏览器都能自动合并这种外边距。
然后你遇到的错误是：某些浏览器在不该 自动合并外边距时 去帮你合并了，合并的顺序是把下面一块往上面挤，就挤到父元素的外边去了。
解释：1、反反复复反反复复发反反复复反反复复反反复复发反反复复反反复复反反反反复复发反反复复
这个浏览器认为是一段话，就是 反 反 复 复 是一个一个得字符。然后就会自动换行。
2、sssssssssssssssssssssssssss
这个浏览器认为是一个单词（貌似单词很长的说），但是确实就是一个very long的单词 单词是不会存在换行的。再举个例子ssssssssssssssss aaaaaaaaaaaaaaaaa 中间有个空格，那么他们就是两个单词了，要是连在一起 就是一个单词了。
解决办法：
首先说一下，ssssssssssssssssssssssss现实生活基本碰不上，除非有人恶搞...
在CSS中补上{overflow:hidden}
******************************************
楼上说的word-break是IE私有属性。ff不支持。
另外即使用也要用word-wrap:break-word；因为word-break:break-all就是所有英文都要换行，会把单词截断的，影响阅读。
word-break:break-all //把英文单词不管三七二十一给弄断了，影响阅读。
word-wrap:break-word //不仅可以把超级长的英文单词截断，还可以根据空格区分英文单词，保持它的可读性。
最后FF不支持上面两个。
再说，还是那句话sssssssssssssssssssssssssssssss现实生活基本碰不上，除非有人恶搞...
