div和span有什么區別

div和span有什么區別？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

 div和span的區別是：div標簽是塊級元素，每個div標簽都會從新行開始顯示，占據一行；div標簽內可以添加其他的標簽元素（行內元素、塊級元素都行）。而，span標簽是行內元素，會在一行顯示；span標簽內只能添加行內元素的標簽或文本。

在html頁面布局時，我們經常會使用到div標簽和span標簽，那么div標簽和span標簽之間有什么區別？本篇文章就給大家介紹div標簽和span標簽之間的區別，希望對你們有所幫助。【相關視頻教程推薦：HTML教程】

HTML div標簽

div標簽是塊級元素，擁有塊級元素的特點。每對div標簽（<div></div>）里的內容都可以占據一行，不會其他標簽在一行顯示；div標簽總是從新行開始顯示；

且div標簽可以通過css樣式來設置自身的寬度（也可省略，當沒有使用css自定義寬度時，div標簽的寬度為其的容器的100%）、高度，且還可以設置標簽之間的距離（外邊距和內邊距）；

我們還可以在div標簽中，使用其他標簽（行內元素、塊級元素都行），比如：span標簽，p標簽，也可以是div標簽。

div標簽的簡單示例：設置這些div標簽的容器的寬度為500px，高度為500px

<div class="div1">內容1，使用div，不設置寬度，不設置邊距</div>
<div class="div2">內容2，使用div，不設置寬度，設置內邊距padding: 20px</div>
<div class="div3">內容3，使用div，不設置寬度，設置外邊距margin: 20px</div>	
<div class="div4">內容4，使用div，設置寬度，設置外邊距margin: 20px</div>		
<div class="div5">內容5，使用div，設置寬度，設置內邊距padding: 20px</div>			
<div class="div1">內容6，使用div，不設置寬度，不設置邊距</div>

效果圖：

簡單示例2：在div標簽了，添加其他html標簽

<div>
	<span>span標簽</span><span>span標簽</span><a href="#">a標簽</a><a href="#">a標簽</a>
	<p>p標簽</p>
	<div>div標簽</div>
</div>

效果圖：

HTML span標簽

span標簽是行內元素，擁有行內元素的特點。span標簽元素會和其他標簽元素會在一行顯示（塊級元素除外），不會另起一行顯示（如上例）。

span標簽的寬度、高度都無法通過css樣式設置，它的寬高受其本身內容（文字、圖片）控制，隨著內容的寬高改變而改變；span標簽無法控制外邊距和內邊距，雖然可以設置左右的外邊距和內邊距，但上下的外邊距和內邊距無法設置。

且，span標簽里只能容納文本或者是其他的行內元素，不能容納塊級元素。

span標簽的簡單示例：

設置span.span1容器的內邊距padding: 20px，span.span1容器內的span標簽的外邊距margin: 20px;

<span>span標簽</span><span>span標簽</span><a href="#">a標簽</a><a href="#">a標簽</a>
<div>div標簽</div>
<span class="span1">span標簽內，添加<span>span標簽</span><a href="#">a標簽</a></span>

效果圖：

可以看出，雖然內邊距padding把span.span1容器撐大了，但span標簽的位置沒有向下移動。

感謝各位的閱讀！看完上述內容，你們對div和span有什么區別大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。