HTML5第六課時，margin外邊距
阿新 • • 發佈：2019-01-31
<!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;假設螢幕是1024，div寬度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: 20px 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>