怎樣用css語言同時設(shè)置元素的內(nèi)外邊距

padding是內(nèi)邊距，margin是外邊距。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了肥城免費建站歡迎大家使用！

以內(nèi)邊距為例，

.box{ padding:10px} /*如果屬性值只有1個數(shù)字，設(shè)置的就是4邊的內(nèi)邊距*/

.box{ padding:10px 20px;} /*如果屬性值有2個數(shù)字，設(shè)置的就是上下(10px)和左右(20px)*/

.box{ padding:10px 20px 30px} /*如果屬性值只有3個數(shù)字，設(shè)置的就是上(10px)、左右(20px)、下(30px)*/

外邊距也是一樣。兩個一起就看你想怎么設(shè)置了

.box{ width:500px; padding:10px; margin:0 auto;}/*這是一個內(nèi)外邊距都有且居中的例子*/

關(guān)于css盒子邊框、內(nèi)邊距、外邊距

使用width來設(shè)置盒子內(nèi)容區(qū)的寬度

使用height來設(shè)置盒子內(nèi)容區(qū)的高度

width和height只是設(shè)置的盒子內(nèi)容區(qū)的大小，而不是盒子的整個大小，盒子可見框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定

為元素設(shè)置邊框

要為一個元素設(shè)置邊框必須指定三個樣式

border-width:邊框的寬度

border-color:邊框顏色

border-style:邊框的樣式

使用border-width可以分別指定四個邊框的寬度

如果在border-width指定了四個值

則四個值會分別設(shè)置給上、右、下、左，按照順時針的方向設(shè)置的

如果指定三個值

則三個值會分別設(shè)置給上、左右、下

如果指定兩個值

則兩個值會分別設(shè)置給上下、左右

如果指定一個值，則四邊全都是該值

除了border-width，CSS中還提供了四個border-xxx-width

xxx的值可能是top right bottom left

專門用來設(shè)置指定邊的寬度

* 設(shè)置邊框的顏色

* 和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色

例如：border-color: red;

/*border-color: red yellow orange blue;*/

/*border-color: red yellow orange;*/

/*border-color: red yellow;*/

格式和邊框設(shè)置顏色相同.

* 設(shè)置邊框的樣式

* 可選值：

* none，默認值，沒有邊框

* solid 實線

* dotted 點狀邊框

* dashed 虛線

* double 雙線

*

* style也可以分別指定四個邊的邊框樣式，規(guī)則和width一致，同時它也提供border-xxx-style四個樣式，來分別設(shè)置四個邊

設(shè)置邊框

大部分的瀏覽器中，邊框的寬度和顏色都是有默認值，而邊框的樣式默認值都是none

*/

/* border-width: 10px;

border-color: red;

border-style: solid; */

/*

border

- 邊框的簡寫樣式，通過它可以同時設(shè)置四個邊框的樣式，寬度，顏色

- 而且沒有任何的順序要求

- border一指定就是同時指定四個邊不能分別指定

border-top border-right border-bottom border-left

可以單獨設(shè)置四個邊的樣式，規(guī)則和border一樣，只不過它只對一個邊生效

*/

/*border: red solid 10px;*/

/*border-left: red solid 10px;*/

內(nèi)邊距：

內(nèi)邊距（padding），指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離，一共有四個方向：

padding-top

padding-right

padding-bottom

padding-left

內(nèi)邊距會影響盒子的可見框的大小，元素的背景會延伸到內(nèi)邊距

盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定

盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width

盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

*/

/*設(shè)置上內(nèi)邊距*/

/*padding-top: 100px;*/

/*設(shè)置右內(nèi)邊距*/

/*padding-right: 100px;

padding-bottom: 100px;

padding-left: 100px;*/

/*

使用padding可以同時設(shè)置四個邊框的樣式，規(guī)則和border-width一致

*/

/*padding: 100px;*/

/*padding: 100px 200px;*/

/*padding: 100px 200px 300px;*/

外邊距：

外邊距指的是當前盒子與其他盒子之間的距離，他不會影響可見框的大小，而是會影響到盒子的位置

盒子有四個方向的外邊距：

margin-top

margin-right

margin-bottom

margin-left

由于頁面中的元素都是靠左靠上擺放的，所以注意當我們設(shè)置上和左外邊距時，會導(dǎo)致盒子自身的位置發(fā)生改變，而如果是設(shè)置右和下外邊距會改變其他盒子的位置

*/

/*設(shè)置上外邊距，即盒子的上邊框與其他盒子的距離*/

/*margin-top: 100px;*/

/*左外邊距*/

/*margin-left: 100px;*/

/*設(shè)置右和下外邊距*/

/*margin-right: 100px;

margin-bottom: 100px;*/

/*

外邊距也可以指定為一個負值，如果外邊距設(shè)置的是負值，則元素會向反方向移動

*/

/*margin-left: -100px;

margin-top: -100px;

margin-bottom: -100px;*/

/*margin-bottom: -100px;*/

/*

margin還可以設(shè)置為auto，auto一般只設(shè)置給水平方向的margin

如果只指定，左外邊距或右外邊距的margin為auto則會將外邊距設(shè)置為最大值

垂直方向外邊距如果設(shè)置為auto，則外邊距默認就是0

如果將left和right同時設(shè)置為auto，則會將兩側(cè)的外邊距設(shè)置為相同的值，就可以使元素自動在父元素中居中

所以我們經(jīng)常將左右外邊距設(shè)置為auto，以使子元素在父元素中水平居中

*/

/*margin-left: auto;

margin-right: auto;*/

/*margin-top: auto;*/

/*

外邊距同樣可以使用簡寫屬性 margin，可以同時設(shè)置四個方向的外邊距,規(guī)則和padding一樣

*/

/*margin: 10px 20px 30px 40px;*/

為上邊的元素設(shè)置一個下外邊距：margin-bottom: 100px;

為下邊的元素設(shè)置一個上外邊距：margin-top: 100px;

垂直外邊距的重疊

在網(wǎng)頁中相鄰的垂直方向的外邊距會發(fā)生外邊距的重疊

所謂的外邊距重疊指兄弟元素之間的相鄰?fù)膺吘鄷∽畲笾刀皇侨『?/p>

如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設(shè)置給父元素

.box3{

width: 200px;

height: 100px;

background-color: yellow;

/*為box3設(shè)置一個上邊框*/

/*border-top: 1px red solid;*/

/*padding-top: 1px;*/

padding-top: 100px;

}

.box4{

width: 100px;

height: 100px;

background-color: yellowgreen;

/*為子元素設(shè)置一個上外邊距，使子元素的位置下移*/

/*margin-top: 100px;*/

瀏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，所以為很多的元素都設(shè)置了一些默認的margin和padding，而它的這些默認樣式，正常情況下我們是不需要使用的。

所以我們往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統(tǒng)統(tǒng)的去掉

格式：

*{

margin: 0;

padding: 0;

}

CSS樣式里外邊距怎么寫的

設(shè)置標簽外邊距為10px：margin:10px;

設(shè)置標簽內(nèi)邊距為10px：

padding:10px;

也可以以四個值來分別設(shè)置標簽上下左右的邊距值，順序為：上 右 下 左

margin:10px 20px 10px 20px;

padding:10px 20px 10px 20px;

還可以分開設(shè)置：

上：margin-top 、padding-top

右：margin-right 、padding-right

下：margin-bottom 、padding-bottom

左：margin-left 、 padding-left

如何設(shè)置CSS內(nèi)邊距

元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。控制該區(qū)域最簡單的屬性是 padding 屬性。

CSS padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。

您還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;

也通過使用下面四個單獨的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：

padding 簡寫屬性。作用是在一個聲明中設(shè)置元素的所內(nèi)邊距屬性。

padding-bottom 設(shè)置元素的下內(nèi)邊距。

padding-left 設(shè)置元素的左內(nèi)邊距。

padding-right 設(shè)置元素的右內(nèi)邊距。

padding-top 設(shè)置元素的上內(nèi)邊距。

分享題目：css樣式設(shè)置內(nèi)外邊距,css中div的內(nèi)外邊距設(shè)置
文章位置：http://chinadenli.net/article12/dsgjhgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、面包屑導(dǎo)航、定制開發(fā)、靜態(tài)網(wǎng)站、App開發(fā)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)