**一、 内容区域及其样式**
1. **width & height**
CSS提供了`width` 和 `height` 属性来定义元素的内容区尺寸。例如：
css
div {
width: 300px;
height: 200px;
}
这段代码为div设置了宽度300像素、高度200像素的内容空间。
2. **content**
对于一些特殊类型的元素如:before 或 :after伪类可以使用`content`属性添加或改变其内部文本内容：
css
p::before {
content: "Read this - ";
}
上述示例会在每个p标签开头插入指定的文字"Read this - "。
**二、内填充 (Padding)**
padding用于控制元素内容与其边界的距离，默认情况下四周均适用。可分别针对四个方向单独设置：
css
div {
padding-top: 15px; /*上*/
padding-right: 20px; /*右*/
padding-bottom: 18px; /*下*/
padding-left: 16px; /*左*/
}
或者简写形式统一四周边距:
css
div {
padding: 15px 20px 18px 16px; /*顺时针顺序：上 右 下 左 */
}
// 当上下左右值相同时也可简化为:
div {
padding: 15px; // 四周均为15px
}
**三、外间距(Margin)**
类似于padding，margin用来设置元素边界到其他元素之间的空白距离。同样支持单个或多方位声明方式：
css
section {
margin-top: 40px; /*上方外部间隙*/
margin-right: auto; /*右侧自动调整以保持水平居中*/
margin-bottom: 70px; /*下方外部间隙*/
margin-left: 90px; /*左侧外部间隙*/
/* 简化书写格式同 Padding 示例 */
}
**四、边框(Border)**
- border-width 设置边框粗细。
- border-style 定义边框类型，包括solid(实线)，dotted(点状虚线), dashed(破折线)等等。
- border-color 设定边框颜色。
这三个属性均可独立应用于各边上，并可通过border shorthand合并编写：
css
article {
border-width: 2px; /* 边框厚度 */
border-style: solid; /* 边框风格 */
border-color: #ccc; /* 边框色彩 */
/* 缩减后版本如下所示 */
border: 2px solid #ccc;
/* 单独设置某一边也可以 */
border-top: 3px dotted red;
}
此外还有诸如radius-border-radius处理圆角边缘，box-shadow制作阴影特效等功能强大的边框相关特性可供利用，进一步增强网页的设计感及用户体验。
总结来说，在CSS世界里灵活运用并掌握好内容大小定位、内外间隔调整以及多样化的边框定制技巧能极大地提升网站的表现力与交互性。通过这些基础却关键的知识点实践应用，设计师们能够创作出更具吸引力也更符合标准规范的作品。