css內外邊距屬性

時間 2019-11-12

標籤 css 內外邊距屬性欄目 CSS 简体版

原文原文鏈接

盒子模型： css

全部HTML元素能夠看做盒子,在CSS中，"box model"是用來設計和佈局時使用。佈局

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充和實際內容。spa

外邊距屬性：設置對象四邊的外部邊距設計

內聯塊級元素和塊級元素的能夠設置外邊距。
內聯元素能夠設置左、右兩邊的外邊距；若要設置上、下兩邊的外邊距，必須先使該元素變爲塊級元素或內聯塊級元素。
若是提供所有四個參數值，將按上、右、下、左的順序做用於四邊。
若是提供兩個，第一個用於上、下，第二個用於左、右。
若是提供三個，第一個用於上，第二個用於左、右，第三個用於下。

內邊距屬性：設置對象四邊的外部邊距code

設置內聯塊級元素和塊級元素的內邊距。
行內元素能夠設置左、右兩邊的內邊距；若要設置上、下兩邊的內邊距，必須先使該元素變爲塊級或內聯塊級元素。
改變padding的值，就改變了content的大小
而改變margin的值，則不改變content的大小

 1 <style type="text/css">
 2     #container{
 3         border: 2px black solid;
 4         width: 700px;
 5         height: 800px;
 6     }
 7     #child{
 8         border: 2px black solid;
 9         width: 400px;
10         height: 400px;
11         margin: 100px auto;/* 設置外邊距 */
12         padding: 100px;/* 設置內邊距 */
13     }
14 </style>
15 </head>
16 <body>
17     
18     <div id="container">
19         <div id="child">div1</div>
20     </div>
21 </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。