Không hiểu 1 đoạn code html nhỏ dưới đây

#1

Mn ơi, hôm nay em học tới 1 bài trong W3Schools thì nó có 1 đoạn code mẫu như sau:

HTML:

<ul>
	<li><a href="#About">About</a></li>
	<li><a href="#Tools">Apps-Games</a></li>
	<li><a href="#GioiThieu">Giới Thiệu</a></li>
	<li><a href="#BaiViet">Bài viết</a></li>
</ul>

CSS:

ul {
	list-style-type:none;
	margin: 0;
	padding:0;
	overflow:hidden;
	background-color:blue;
}
li {
	float:right;
}
li a {
	display:block;
	color:white;
	text-align:center;
	padding:20px;
	text-decoration:none;
}
li a:hover {
	background-color:orange;
}

Trong đó, ở phần CSS, em không hiểu 2 cái padding: 0; và margin: 0; dùng để làm gì ?
Còn cái overflow: hidden; nữa ? Em thử bỏ cái dòng này thì nó mất cái khung màu xanh ??
Còn cái cuối cùng em chưa hiểu là ở chỗ display: block; nên mọi người cho em biết chỗ này có tác dụng gì không ạ ?

Tks Mn nhiều nhiều :smiley:

#2

margin: 0 để cái danh sách không có khoảng trống với các thành phần khác.
padding: 0 để các item trong cái list nó không cách lề.
overflow: hidden nếu nội dung dài hơn chiều dài của thẻ thì phần vượt quá sẽ không hiển thị.
display: block chiếm độ dài 100%.

1 Like
#3

Không cách lề nghĩa là sao anh ? Tức là nó không tự xuống dòng như bình thường hả ?

Nội dung là cái gì thế anh ? Còn chiều dài của thẻ nữa ? Vì em chưa biết tới cái vụ “chiều dài của thẻ” :smiley:

Tức là nguyên cái ul chiếm 100% chiều ngang đó hả anh ?

#4

Bạn đọc cái này xem, hiểu về Box model thì sẽ hiểu cái padding margin, còn các property khác thì đọc docs thêm http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

1 Like
#5

Em mới học html à anh ơi, chưa học css :cry:

Với lại vốn tiếng Anh em rất ít ỏi :frowning:

#6

thứ bạn đang hỏi chính là css rồi đấy, tập dần cho quen bạn à, làm nghành này không luyện tiếng anh thì khó tiến được lắm

1 Like
#7

Hỏi thế thì chịu rồi.

Học theo khoá này đi: https://laptrinh.io/series/hoc-lap-trinh-web-front-end-su-dung-html5-va-css3

2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?