Thuộc tính Style marginTop

Định nghĩa và cách sử dụng

marginTop cài đặt hoặc trả về khoảng cách trên ngoài của phần tử.

Thuộc tính margin và Thuộc tính padding Đều chèn khoảng cách xung quanh phần tử. Nhưng, khác nhau ở chỗ, margin chèn khoảng cách xung quanh viền, trong khi padding chèn khoảng cách trong viền của phần tử.

Xem thêm:

Giáo trình CSS:Phương diện CSS

Hướng dẫn CSS:Thuộc tính margin-top

Hướng dẫn HTML DOM:Thuộc tính margin

Mô hình

Ví dụ 1

Đặt khoảng cách trên ngoài của phần tử <div>:

document.getElementById("myDiv").style.marginTop = "50px";

Thử ngay

Ví dụ 2

Đặt lại khoảng cách trên ngoài của phần tử <div> về "normal":

document.getElementById("myDiv").style.marginTop = "0px";

Thử ngay

Ví dụ 3

Trả về khoảng cách trên ngoài của phần tử <div>:

alert(document.getElementById("myDiv").style.marginTop);

Thử ngay

Ví dụ 4

Khoảng cách trên ngoài và paddingTop khác nhau:

function changeMargin() {
  document.getElementById("myDiv").style.marginTop = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.paddingTop = "100px";
}

Thử ngay

Cú pháp

Trả về thuộc tính marginTop:

object.style.marginTop

Cài đặt thuộc tính marginTop:

object.style.marginTop = "%|length|auto|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
% Định nghĩa khoảng cách trên ngoài bằng phần trăm chiều rộng của phần tử cha.
length Định nghĩa khoảng cách trên ngoài bằng đơn vị độ dài.
auto Cài đặt khoảng cách trên ngoài trong trình duyệt.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Di chuyển thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: 0
Giá trị trả về: Chuỗi, biểu thị khoảng cách trên ngoài của phần tử.
Phiên bản CSS: CSS1

Trình duyệt hỗ trợ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ