溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“HTML中div和span的區別有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“HTML中div和span的區別有哪些”吧！
HTML div標簽
div標簽是塊級元素，擁有塊級元素的特點。每對div標簽（<div></div>）里的內容都可以占據一行，不會其他標簽在一行顯示；div標簽總是從新行開始顯示；
且div標簽可以通過css樣式來設置自身的寬度（也可省略，當沒有使用css自定義寬度時，div標簽的寬度為其的容器的100%）、高度，且還可以設置標簽之間的距離（外邊距和內邊距）；
我們還可以在div標簽中，使用其他標簽（行內元素、塊級元素都行），比如：span標簽，p標簽，也可以是div標簽。
div標簽的簡單示例：設置這些div標簽的容器的寬度為500px，高度為500px
1 2 3 4 5 6 | <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標簽
1 2 3 4 5 | <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;
1 2 3 | <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標簽的位置沒有向下移動。
感謝各位的閱讀，以上就是“HTML中div和span的區別有哪些”的內容了，經過本文的學習后，相信大家對HTML中div和span的區別有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
