padding屬性和margin屬性,css怎么增加邊框沒有間隙?
css增加邊框沒有間隙的方式如下
方法一:通用兄弟選擇器( ~ )
Document
ul {margin: 0; padding: 0;}
li { list-style: none; height: 50px; line-height: 50px;}
li~li {border-top: 1px solid #000;}
1
2
3
4
5
6
li~li {...} 中的 ~ 符號稱為通用兄弟選擇器,匹配P元素之后的P元素,所以第一個P元素不會匹配到。
方法二:偽類選擇器( :first-of-type / :last-of-type )
Document
ul {margin: 0; padding: 0;}
li { border-top: 1px solid #000; list-style: none; height: 50px; line-height: 50px;}
li:first-of-type {border-top: none;}
1
2
3
4
5
6
首先將所有 li 設置 border-top,然后用 :first-of-type 查找到第一個 li ,取消border-top。
margin和padding有什么區別?
CSS中margin和padding有以下三方面區別。 在CSS中margin是指從自身邊框到另一個容器邊框之間的距離,就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離,就是容器內距離。
1、語法結構。 padding: padding-left:10px; 左內邊距、padding-right:10px; 右內邊距、padding-top:10px; 上內邊距、padding-bottom:10px; 下內邊距。 margin:margin-left:10px; 左外邊距、margin-right:10px; 右外邊距、margin-top:10px; 上外邊距、margin-bottom:10px; 下外邊距。
2、可能取的值。 padding:length規定具體單位記的內邊距長度、%基于父元素的寬度的內邊距的長度、auto瀏覽器計算內邊距、inherit 規定應該從父元素繼承內邊距。 margin:length 規定具體單位記的外邊距長度、%基于父元素的寬度的外邊距的長度、auto瀏覽器計算外邊距、inherit 規定應該從父元素繼承外邊距。
3、瀏覽器兼容問題。 padding:所有瀏覽器都支持padding屬性、任何版本IE都不支持屬性值“inherit”。 margin:所有瀏覽器都支持margin屬性、任何版本IE都不支持屬性值“inherit”。
html兩種標記類型及其特點?
分為行內元素和塊元素
行內元素特點:
(1)設置寬高無效
(2)對margin僅設置左右方向有效,上下無效;padding設置上下左右都有效,即會撐大空間
(3)不會自動進行換行
塊元素特點:
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起,默認排列方式為從上至下
html內邊距啥意思?
內邊距padding的意思是: 邊框與內容之間的距離。
內邊距padding
padding屬性定義元素的內邊距。padding 屬性接受長度值或百分比值,但不允許使用負值。
按照上、右、下、左的順序分別設置各邊的內邊距,各邊均可以使用不同的單位或百分比值,例如:
h1 {padding: 10px 0.25em 2ex 20%;}
內邊距也通過使用下面四個單獨的屬性,分別設置上、右、下、左內邊距
padding-top 上內邊距;
padding-right 右內邊距;
padding-bottom 下內邊距;
padding-left 左內邊距;
例如:
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}