CSS 是制作網頁的重要技術之一，其中涉及了很多的屬性。其中一個重要的概念是“由內向外”。這篇文章會對這個概念進行詳細的介紹。

CSS 屬性的應用和作用是由內向外的。我們以一個簡單的網頁布局為例。假設有一個 div 元素：

<div>
<p>這是 div 里面的第一個 p 元素
<span>這是一個 span 元素</span>
</p>
<p>這是 div 里面的第二個 p 元素</p>
</div>

如上述代碼所述，我們可以看到這個 div 元素包含兩個 p 元素。假如我們給這些元素添加 CSS 樣式：

div {
background-color: gray;
padding: 10px;
}
p {
background-color: white;
margin: 10px;
padding: 10px;
}
span {
background-color: orange;
}

首先，我們應用了背景灰色，并添加了內邊距的樣式給 div 元素。這是由內向外的，因為這個樣式只作用于這個元素。 接下來，我們為每個 p 元素添加了白色的背景、外邊距和內邊距樣式。這樣的話，我們就創建了一個白色的盒子，然后對其四個角進行了填充、和外邊距，使其與其他元素有一定距離。這也是由內向外的，因為這個樣式只作用于每個 p 元素本身。 最后，我們給 span 元素添加了橙色的背景，但并沒有添加其他樣式。這是由內向外的，因為這個樣式只作用于 span 元素，而不是父元素的樣式。 總之，CSS 樣式是由內向外的應用和作用。在為元素設置樣式時，我們應該首先考慮元素本身，在這個基礎上進行樣式設計，以實現美觀的頁面布局。