1. 程式人生 > >HTML5第六課時,margin外邊距

HTML5第六課時,margin外邊距

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>margin外邊距</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*標籤選擇器*/
div{
            height: 300px;
            width: 500px;
            background-color
: #585858; color: white; font-size: 50px; /*margin-left: 262px;假設螢幕是1024div寬度500,剩下524,除以2得到262,讓div居中 但是當瀏覽器縮小的時候,又不居中了。應該用margin:0 auto*/ margin: 0 auto; margin-bottom: 30px; /*line-height: 50px; 文字沒有緊貼上方顯示,加上行高跟字型大小一樣,就可以緊貼著顯示*/ /*margin-top: 20px;
margin-left: 50px; margin-right: 50px; margin-bottom: 20px;*/ /*上面等價於,margin:20px 50px 50px 20px;順序是上右下左 如果是margin:20px 50px;就是上下20px,左右50px 如果margin:20px;是上下左右都是20px 如果margin:20px 50px 20px;是上20px,左和右是50px,下是20px*/ text-align: justify;/*文字兩端對齊。*/ border-top: 20
px dashed red ; border-right: 20px solid red; border-bottom: 20px dotted red; border-left: 20px double red; /*border會影響文字的區域,但是不會改變div的大小。*/ } p{ background-color: red; font-size: 50px; } </style> </head> <body> <div> 扭轉星辰扭轉星辰扭轉星辰扭轉星辰扭轉星辰扭轉星辰扭轉星辰 </div> <p>十盜偷天</p> </body> </html>