iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

我的網頁前端小小小教室系列 第 13

Day13 CSS基礎設定_3

今天我們要來介紹有關CSS排版,方塊的概念,之前的文章有提到過,網頁就像很多不同的方塊組合而成,這樣解釋或許有點難懂,但接下來我們會實際帶你來看。

margin 和 padding

這兩項是CSS中很常會設定到的屬性,而他是用來幹嘛的呢?

margin:和外面四周間距。
首先我們建立兩個長寬各100px,顏色是紅色的方塊。

<style>
        div{
            width: 100px;
            height: 100px;
            background-color:red ;
        }
</style>
<body>
    <div>
        
    </div>
    <div>
        
    </div>
</body>


這時候我們發現雖然是兩個方塊,但是他們之間黏在一起,所以看起來像一個長方形,這時候我們就可以利用margin分開他們。在style裡添加這行

margin: 10px;


這時候就會發現它們中間有了10px的距離,但其實不只有中間,而是離左邊、右邊、下面都有了10px的距離。因為margin沒有改變屬性時,預設就是四個方位(上、下、左、右)都增加你所設定的單位距離。當然你也可以透過單一去調整。

margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

你也可以透過這樣調整!兩種方式都會的話十分方便喔,如果你還是不太懂,可以看看這張圖。


padding:和裡面四邊間距。
首先我們建立一個長寬各250px的方塊,裡面有文字內容。

<style>
    div{
        width: 250px;
        height: 250px;
        background-color:red ;
    }
</style>
        
<body>        
    <div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est cum amet voluptatibus molestiae enim aut consequatur facilis deleniti provident accusamus aliquam temporibus officia impedit qui perspiciatis, distinctio ex quod repellendus. Hic laborum fugit delectus atque, dolor voluptatum odio quas quos, asperiores doloremque, maiores dolores nulla labore exercitationem nesciunt iusto autem culpa. Beatae quia asperiores vel minus! Fugit neque enim et?</p>
    </div> 
</body>


結果會長這樣,但不覺得文字跟旁邊的方框很擠嗎,這時候我們就要使用padding。

padding: 50px;


這時候看起來是不是就舒服多了呢!但要注意一點,你在設定寬高的時候,因為你設定了padding:50px ,所以你原本設定的250px的方框,也會因為你加的padding而增加寬高,左右上下各增加50px。變成寬高350的一個方框。

另外,padding也如同margin,可以對單一方向做調整。

    padding-left: 50px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;

經過上面的介紹,了解margin跟padding了嗎!


上一篇
Day12 CSS基礎設定介紹_1
下一篇
Day14 CSS基礎設定_4
系列文
我的網頁前端小小小教室30

尚未有邦友留言

立即登入留言