搜尋

首頁 >web前端 >html教學 >HTML 內邊距與邊距

HTML 內邊距與邊距

王林
王林原創
2024-09-04 16:19:311073瀏覽

在 HTML 中，margin 和 padding 是用來分隔 HTML 內容中的元素的兩個元素。 Margin 是 HTML 中元素的外部空間，而 padding 是元素的內部空間，但這兩個概念都針對 HTML 元素的空間複雜度。所有 HTML 元素標記集都利用填滿和邊距來定義其屬性和行為。它還可以識別使 HTML 文件（例如網頁）從使用者的角度更具吸引力的方法。

HTML 填充和邊距之間的面對面比較（資訊圖表）

以下是 HTML Padding 與 Margin 之間的前 6 個比較：

HTML 內邊距與邊距

HTML 填充和邊距之間的主要差異

讓我們在以下幾點討論 HTML Padding 與 Margin 之間的一些關鍵區別：

  • HTML 內邊距和邊距代表與 HTML 元素中的空間和邊框相關的兩個屬性。 padding 和 margin 都用於 CSS 樣式；當我們在這兩個屬性中使用 CSS 樣式時，它們就會有自己的行為。
  • 使用者應根據使用者的需求將特定元素與 padding 屬性關聯起來，以實現元素內側的空間。邊距（margin）與填充（padding）也是一樣的，但空間是根據使用者規格位於網頁文件的外側。
  • 如果我們指定 HTML 文件的邊距類型，邊距有不同的類型，如上、下、左、右。如果我們在 HTML 的邊距和內邊距中使用 CSS 樣式，它們在網頁上的作用將會更加強大。
  • 設定元素頂部的 HTML margin-top 值應指定長度或百分比。子值指定並引用父元素的寬度，即 HTML 內容的八個。在 HTML 表格功能中，我們使用 HTML 中的填充，它有不同的類型，例如單元格填充和單元格間距。
  • 在 HTML 表格中設定儲存格填滿和儲存格間距值將為表格的 CSS 屬性指定水平和垂直空間。有時，單元格間距屬性不適用於 Internet Explorer 版本，如 7、8、9 等；使用 border-spacing 屬性取代 cell-spacing 可以增強使用者相容性模式。為 border-spacing 屬性指定 null 值，它還可以容納其他潛在值，使其對單元格間距屬性更有利。
  • 我們可以提到，HTML 表格中的屬性值是單元格間距、邊框間距和邊框折疊的基本範例；這些屬性與我們在 HTML 表格中使用的屬性相同，以便在前端更具吸引力。
  • 基於此，我們也提到了相同 HTML 表格中的填滿和邊距空間。我們也使用
    ;標籤作為 HTML 中的預定義標籤，但如果可能的話，我們也在使用者螢幕中的嵌套 div 標籤中使用填充空間和邊距空間。
  • 當我們在HTML表格中使用div標籤時，我們將資料包裝在表格單元格中，但是當我們在HTML表格的div標籤中聲明填充空間和邊距空間時，該列的每個表格單元格都會被統一，或者在前端畫面中應該是升序格式。

    • 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 填滿和 HTML 邊距的範例：

    範例 #1 – 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>

    輸出：

    HTML 內邊距與邊距

    HTML 內邊距與邊距

    在上面的範例中，我們使用javascript自動設定網頁中的padding大小；我們點擊「to mydomain」圖標，它會安排填充大小。

    範例 #2 – HTML 邊距

    代碼：

    <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>

    輸出：

    HTML 內邊距與邊距

    HTML 內邊距與邊距

    在上面的相同範例中，我們使用 javascript 函數在點擊按鈕時自動設定邊距值。

    結論

    HTML 填滿和邊距是建立具有視覺吸引力的網頁和在前端面板中應用正式樣式的關鍵元件。它將專注於應該靈活的專業內容，並且還將繪製使用者輸入值以在後端和前端正確對齊。 Javascript 和一些其他框架（如 Bootstrap 和 jquery 函式庫）與這些 HTML 元素結合。

以上是HTML 內邊距與邊距的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css bootstrap html NULL define if for format using Length Attribute Property function margin padding border column input table
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML 表單屬性下一篇：HTML 表單屬性

相關文章

看更多