html標簽有三大性質，如果不清楚這些東西，在使用css添花的時候可能會糊涂的不知所措。

一、塊級元素

塊元素會獨自占據一整行，或者多行，可以任意設置其大小尺寸，是用于搭建網頁布局的必須部分，使網頁結構更加緊湊合理。

• 典型代表：div,h1-h6,p,ul,li
• 特點：

1.獨占一行，普通流中不予許有和它同占一行的

2.可以設置其寬度、高度，內外邊距

3.嵌套(包含)下，子塊元素寬度(沒有定義情況下)和父塊元素寬度默認一致

4.可以容納其他元素，p元素是例外

二、行內元素

• 典型代表： span ,a, ,strong , em, del, ins
• 特點：

1.在一行上顯示，如果不是塊級元素，所有的元素都會并排一起

2.設置寬高無效，水平方向的padding和margin屬性可以設置，但是垂直方向上的無效。

3.元素的寬和高就是內容撐開的寬高，自身無法設置。

4.只能容納其他行內元素或者文本，a元素是例外，但是放了塊級元素就不能放鏈接了。

三、行內塊元素(內聯元素)

• 典型代表 input img
• 特點：

1.和相鄰行內元素在同一行，但是之間會有空白縫隙。

2.默認寬度是他本身內容的寬度，但是也可以手動設置

三、轉換屬性的方法

• 塊元素轉行內元素：display:inline;
• 行內元素轉塊元素：display:block;
• 塊和行內元素轉行內塊元素：display:inline-block;

四、行高

• 瀏覽器默認文字大小：16px
• 行高：是基線與基線之間的距離，行高=文字高度+上下邊距
• 一行文字行高和父元素高度一致的時候，垂直居中顯示

實例：開發網頁時，你會發現，圖片和底部對不齊，他們之間會有間隙，那么為什么會有這個間隙呢？

原因：這是因為img元素后面會跟一個空白符，會使它的高度多出3px。至于這個空白符出現的原因嘛，是因為img元素是行內元素，行內元素默認會有3px的間距。因此當我們的塊級元素div包含這個行內元素的時候底部就出現了3px的間距。

解決方法：將img轉換為塊級元素就好了，{display:block}

---

如果喜歡點擊加關注，有什么問題或者建議可以在下方評論留言哦~~

總結

以上是生活随笔為你收集整理的div中的p标签于img设置同一水平_前端工程师：css中一些需要注意的东西的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。