在 HTML 中，margin 和 padding 是用來分隔 HTML 內容中的元素的兩個元素。 Margin 是 HTML 中元素的外部空間，而 padding 是元素的內部空間，但這兩個概念都針對 HTML 元素的空間複雜度。所有 HTML 元素標記集都利用填滿和邊距來定義其屬性和行為。它還可以識別使 HTML 文件（例如網頁）從使用者的角度更具吸引力的方法。
以下是 HTML Padding 與 Margin 之間的前 6 個比較：
讓我們在以下幾點討論 HTML Padding 與 Margin 之間的一些關鍵區別：
下表總結了 HTML Padding 與 Margin 之間的比較：
| HTML Padding | HTML Margins |
| It is used to create the space inner side of the web pages in the HTML contents. | The outer side of the HTML contents in the web pages is declared using it. |
| It has different types like top, bottom, left and right paddings. | There are various types of margins, including top, bottom, left, and right margins. |
| It is mainly used for the CSS styles on the web pages. | Similarly, within CSS styles and certain HTML contents, margins are commonly utilized for the layout of web pages. |
| It coordinates and combines with the other HTML tags, which help in the attributes and behavior of the HTML web pages. | It also combines with the other HTML tags, helping in the attributes and behaviors of the HTML web pages. |
| The padding property sets the padding areas for all the four-sides of the HTML elements. | The margin property sets the margin areas on either top, bottom, left, or right based on the values we specified in the styles of documents. |
| We can use javascript to set the padding sizes in the web pages automatically. | We also use Javascript to set the margin length on the web pages automatically. |
以下是 HTML 填滿和 HTML 邊距的範例：
代碼：
<html>
<head>
<style>
#sample {
border: 2px solid orange;
padding: 38px;
}
.sample2 {
border: 4px solid orange;
margin: 39px;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "22px 23px";
}
</script>
</body>
</html>輸出：
在上面的範例中，我們使用javascript自動設定網頁中的padding大小；我們點擊「to mydomain」圖標，它會安排填充大小。
代碼：
<html>
<head>
<style>
#sample {
border: 2px solid orange;
margin-left: 19%;
}
.sample2 {
border: 4px solid orange;
margin-top: 14%;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.margin = "3%";
}
</script>
</body>
</html>輸出：
在上面的相同範例中，我們使用 javascript 函數在點擊按鈕時自動設定邊距值。
HTML 填滿和邊距是建立具有視覺吸引力的網頁和在前端面板中應用正式樣式的關鍵元件。它將專注於應該靈活的專業內容，並且還將繪製使用者輸入值以在後端和前端正確對齊。 Javascript 和一些其他框架（如 Bootstrap 和 jquery 函式庫）與這些 HTML 元素結合。
以上是HTML 內邊距與邊距的詳細內容。更多資訊請關注PHP中文網其他相關文章！
