Cách sử dụng CSS padding

Xin chào tất cả các bạn! Hôm nay mình sẽ cùng các bạn tìm hiểu về 1 thuộc tính của  CSS padding và cách sử dụng của css padding.

Khái niệm và cách sử dụng của css padding.

Thuộc tính CSS padding cho phép chúng ta tạo không gian xung quanh nội dung của một phần tử, bên trong bất kỳ đường viền xác định nào.

Padding – Individual Sides

CSS có các thuộc tính để chỉ định khoảng trống cho mỗi bên của một phần tử:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Tất cả các thuộc tính trên sẽ là:

padding-top: Thêm khoảng không gian ở bên trong hướng lên trên của thành phần nào đó.

padding-right: Thêm khoảng không gian ở bên trong hướng bên phải của thành phần nào đó.

padding-bottom: Thêm khoảng không gian ở bên trong hướng xuống dưới của thành phần nào đó.

padding-left: Thêm khoảng không gian ở bên trong hướng bên trái của thành phần nào đó.

Các bạn có thể vận dụng các thuộc tính padding một cách linh hoạt để có thể đạt được những hiệu quả nhất định nào đó.

Padding-top

Cấu trúc:

padding-top:giá trị;

Sau đây mình sẽ demo để các bạn có thể dễ hiểu hơn về thuộc tính này.

Mã HTML

        <h2>padding-top</h2>
        <div>Thành phần sử dụng thuộc tính</div>

Thuộc tính CSS

div{
	border: 1px solid black;
	padding-top: 100px;
	background-color: blue;
}

Hiển thị

hiển thị cách sử dụng của css padding top

hiển thị cách sử dụng của css padding top

Phân tích: Nhìn vào kết quả có thể thấy chiều cao của thành phần đã được cộng dồn thêm 100px.

Padding-right

Cấu trúc:

padding-right:giá trị;

Sau đây mình sẽ demo cho các bạn để có thể hiểu rõ về thuộc tính này.

Mã HTML

	<h2>padding-right</h2>
	<div>Thành phần sử dụng thuộc tính</div>

Thuộc tính CSS

div{
	border: 1px solid black;
	padding-right: 50px;
	width: 300px;
	background-color: green;
}

Hiển thị chương trình

hiển thị cách sử dụng của css padding right

hiển thị cách sử dụng của css padding right

 

Phân tích: Nhìn vào kết quả có thể thấy chiều rộng bên phải của thành phần không còn là 300px mà đã được cộng dồn thêm 50px tổng là 350px.

Padding-bottom

Cấu trúc:

padding-bottom:giá trị;

Sau đây mình sẽ demo cho các bạn để hiểu thêm về thuộc tính này

Mã HTML

        <h2>padding-botton</h2>
        <div>Thành phần sử dụng thuộc tính</div>

Thuộc tính CSS

Hiển thị

div{
	border: 1px solid black;
	padding-bottom: 50px;
	width: 300px;
	background-color: violet;
}
hiển thị cách sử dụng của css padding bottom

hiển thị cách sử dụng của css padding bottom

Phân tích: Nhìn vào kết quả ta thấy chiều rộng bên dưới của thành phần đã được cộng dồn 50px.

Padding-left

Cấu trúc:

padding-left:giá trị;

Mã HTML

        <h2>padding-left</h2>
	<div>Thành phần sử dụng thuộc tính</div>

Thuộc tính CSS

div{
	border: 1px solid black;
	padding-left:50px;
	width: 300px;
	background-color: yellow;
}

Hiển thị

hiển thị cách sử dụng của css padding left

hiển thị cách sử dụng của css padding left

Phân tích: Ta thấy chiều rộng của thành phần không còn là 300px mà đã được cộng dồn thêm 50px vào bên trái tổng là 350px.

Bạn có thể tham khảo:

Lời kết

Bài học hôm nay đến đây là kết thúc chúc các bạn học tập tốt, hẹn gặp lại các bạn vào các bài học tiếp theo.

Các bạn cũng có thể tham khảo thêm một số bài viết hay và ấn tượng hơn tại đây nhé!!

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *