css盒子文字 |css 按钮灰色

.box{
width: 100px;
height: 100px;
border: 1px solid black;
padding: 10px;
}
.box p{
margin: 0;
}

首先，大家需要知道CSS盒模型中的四个重要属性：content、padding、border、margin。在其中，content指的是元素内容区域，padding指的是内容区域与元素边框之间的间隔，border指的是元素边框，margin指的是元素与其它元素之间的间隔。

盒子文字的排版方式受到这四个属性的影响。当大家在一个盒子中添加

标签时，如果没有设置其它属性，则

标签的内容会完全填充盒子内容区域，并且

标签与盒子边框之间会出现默认的间隔。这时候，文字会沿着盒子的宽度方向自动换行。

如果大家给盒子设置了padding，则

标签的内容区域会缩小，同时

标签与盒子边框之间的间隔也会变化。如果盒子的宽度和高度不够放置

标签的全部内容，则文字会自动换行。在上述代码中，设置了

标签的margin为0，是为了消除默认的上下间隔。

例如，如果大家在上述代码的基础上再添加一个文字的行，而盒子高度不够，那么就会发生自动换行的情况。

这是一段文字
这是另一段文字

在排版盒子文字时，还有一些小技巧可以使用。使用文本对齐属性text-align可以让文字在盒子中居左、居中、居右显示。使用行高属性line-height可以控制文字在垂直方向上的间隔。

.box{
width: 100px;
height: 100px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box p{
margin: 0;
line-height: 1.5;
}

总之，在掌握了CSS盒模型的基础之后，熟练掌握盒子文字排版方式是Web开发人员必备的技能。