Học lap trình Web với các ngôn ngữ CSS3, HTML 5 và Javascript. Dành cho các bạn sinh viên, người muốn tìm hiểu để làm các trang web đẹp, các design thiết kế frontend một ứng dụng web. Sách bằng tiếng việt.
10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img (/) Trang cá nhân (/user/dashboard) Gõ từ khóa để tìm kiếm Khoảng trắng bí ẩn bên dưới thẻ img TRANG CHỦ (/) BLOG (/POSTS) KHOẢNG TRẮNG BÍ ẨN BÊN DƯỚI THẺ IMG (/POSTS/33592/HOCLAPTRINHWEBCOBAN) Khi sử dụng thẻ img để chèn ảnh vào trang web, có 1 hiện tượng khá thú vị mà không phải ai cũng biết hoặc để ý đến. Đó là nếu bọc thẻ img bởi 1 thẻ div (hoặc bất kỳ 1 thẻ nào khác) thì sẽ xuất hiện 1 khoảng trắng nhỏ ở bên dưới ảnh Thích Chia sẻ Nếu chúng ta thiết lập padding cho thẻ div thì do khoảng trắng này mà khoảng cách phần bên dưới vẫn lớn hơn phần bên trên. Vậy khoảng trắng này từ đâu mà có? http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 1/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Để hiểu rõ về vấn đề này, chúng ta phải nắm rõ về HTML, CSS (http://techmaster.vn/khoahoc/25487/webcobanhtml5 css3vajavascript), đặc biệt là khái niệm về Inline element và Block element Mặc định thẻ img trong HTML là một Inline element, tức là nó được coi như là text. Do đó nó sẽ được browser xử lý như với text thông thường. Đến đây ta lại phải biết một chút về text, một số khái niệm về text trong kỹ thuật in ấn: Trên cùng 1 dòng, các chữ cái sẽ nằm trên một đường thẳng gọi là baseline (đó cũng là giá trị mặc định của thuộc tính verticalalign trong CSS) Một số chữ cái, ký tự đặc biệt sẽ có 1 phần nằm dưới baseline ví dụ như y, j, p, g, và phần nằm dưới đó gọi là descenders (tương tự, có 1 phần nằm trên text gọi là ascenders) Do đó trình duyệt sẽ tạo ra 1 khoảng trắng dành cho phần descenders của text, nếu chúng ta viết thêm 1 vài ký tự có descenders vào bên cạnh ảnh và tăng fontsize của chúng lên, chúng ta sẽ thấy rõ tại sao lại có khoảng trắng nhỏ bên dưới ảnh http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 2/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img ❝ Khóa học HTML5, CSS3, JavaScript jQuery (http://techmaster.vn/khoahoc/25487/webcobanhtml5 css3vajavascript) dạy từ căn bản cho người mới bắt đầu, có nhiều ví dụ mẫu, tip tricks để bạn có thể thiết kế web site chuyên nghiệp. Khóa học cơ bản cần thiết để học nâng cao khóa Node.js hay PHP Vậy là chúng ta đã khám phá được khoảng trắng bí ẩn bên dưới thẻ img. Và để xử lý khoảng trắng đó chúng ta có thể dùng các cách sau: Dùng thuộc tính verticalalign cho thẻ img với giá trị là middle Dùng thuộc tính lineheight cho thẻ div với giá trị là 0 Chuyển img thành Block element với thuộc tính display Ngày đăng: 10/10/2015 TOP ← Bài trước ( /33591/uudaihocphihoclaptrinh) Lập trình web (99) (/categories/79/p/1/Lập trình web) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg Bài sau → ( /33593/hoclaptrinhwebbangngonnguphp) HTML (4) (/categories/453/p/1/HTML) lập trình (176) (/categories/444/p/1/lập trình) 3/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img CSS (4) (/categories/454/p/1/CSS) ( /33577/cachsudungsublimetext) Reformat Code HTML, CSS trong Sublime text ( /33577/cachsu dungsublimetext) ( /33569/hoststaticwebsitevoi github) Host static website với Github ( /33569/hoststaticwebsitevoi github) ( /33579/xuatrafileexcel) Format cell khi export HTML table ra Excel ( /33579/xuatrafile excel) ĐẶNG QUANG HUY Lập trình viên web tại Techmaster. Đã tham gia nhiều dự án gia công trên nền tảng PHP, Nodejs, và còn là giảng viên Khóa học lập trình web cơ bản với HTML, CSS, Javascript http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 4/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img 0 bình luận Sắp xếp theo Hàng đầu Thêm bình luận Facebook Comments Plugin SẮP KHAI GIẢNG Lập trình iOS Objective-C NGÀY 30/10/2015 (/khoahoc/8212/laptrinhiosobjectivec) BÀI VIẾT ĐƯỢC QUAN TÂM 10 Lời Khuyên Từ Các Chuyên Gia Php Dành Cho Người Mới Bắt Đầu (/posts/33611/phpdanhchonguoimoibatdau) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 5/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Trở Thành Một Lập Trình Viên Full Stack (/posts/33614/laptrinhvienfullstacklagi) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 6/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Bạn Muốn Tự Học Lập Trình? Điều Đó Có Thể - Nhưng Không Dễ Dàng (/posts/33612/tuhoclaptrinhthanhcong) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 7/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Thực Tập Lập Trình Dài Hạn 12 Tháng Tại Techmaster: Web Và Mobile (/posts/33583/thuctaplaptrinhwebmobile) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 8/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Ngôn Ngữ Lập Trình Tốt Nhất Cho Người Mới Bắt Đầu (/posts/33449/ngonngulaptrinhtotnhatchonguoimoibatdau) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 9/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Kĩ Thuật Ipc (inter Process Communication - Liên Lạc Giữa Các Process) Trong Kiến Trúc Microservice (/posts/33616/kithuatipctrongkientrucmicroservice) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 10/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Unit Test Dùng Để Làm Gì Và Kinh Nghiệm Viết Unit Test Tốt Nhất (/posts/33618/unittestdungdelamgivakinhnghiemvietunittesttotnhat) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 11/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Giải Mã Về Loại Lập Trình Web: Front-end Vs Back-end Vs Full Stack (/posts/33487/laptrinhwebfrontendvsbackendvsfullstack) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 12/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Sự Khác Nhau Giữa Process Và Thread (/posts/33604/sukhacnhaugiuaprocessvathread) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 13/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Ngôn Ngữ Lập Trình Tốt Nhất Để Học Trong Năm 2015 (/posts/33442/ngonngulaptrinhtotnhat) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg 14/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Bùi Xuân Hiếu bxh.hieu @gmail.com Em thấy nội dung bài học khá ổn, tất cả các bài học đề có sample code cho học viên tham khảo. Tuy nhiên chương trình học khá nhanh nên em chưa theo kịp chương trình dạy. Nếu giảng viên có thể dạy chậm lại một chút và có thêm một số buổi cho học viên làm bài tập. Giảng viên nhiệt tình trình độ chuyên môn Pro. Phong cách giảng dạy chuyên nghiệp. Thời gian tới em mong muốn techmaster mở thêm một lớp về C++ và một khóa về cấu trúc dữ liệu và giải thuật để học viên có thể theo học và nâng cao tư duy lập trình. Nếu techmaster mở một trong hai lớp trên em sẽ theo học DANH MỤC BÀI VIẾT Agile (8) (/categories/440/p/1/agile) Altassian (4) (/categories/72/p/1/altassian) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg Android (51) (/categories/78/p/1/android) 15/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img ASP.net (6) (/categories/86/p/1/aspnet) C++ (11) (/categories/438/p/1/c) công việc (101) (/categories/448/p/1/congviec) CSS (4) (/categories/454/p/1/css) Database (8) (/categories/435/p/1/database) JavaScript (11) (/categories/224/p/1/javascript) lập trình php (24) (/categories/445/p/1/laptrinhphp) iOS (164) (/categories/70/p/1/ios) lập trình (176) (/categories/444/p/1/laptrinh) lập trình ứng dụng (80) (/categories/451/p/1/laptrinhungdung) Mac (10) (/categories/88/p/1/mac2) Lập trình web (99) (/categories/79/p/1/laptrinhweb) Microservice (3) (/categories/455/p/1/microservice) News (49) (/categories/9/p/1/news) Odoo (3) (/categories/456/p/1/odoo) Project Management (22) (/categories/83/p/1/projectmanagement) Ruby on Rails (32) (/categories/80/p/1/rubyonrails) Nghề nghiệp (38) (/categories/436/p/1/nghenghiep) PHP (55) (/categories/81/p/1/php) Python (9) (/categories/439/p/1/python) Scala (20) (/categories/73/p/1/scala) SharePoint (6) (/categories/75/p/1/sharepoint) Swift (8) (/categories/417/p/1/swift) TechMaster (104) (/categories/85/p/1/techmaster) Tutor (65) (/categories/67/p/1/tutor) Twitter Boostrap (1) (/categories/442/p/1/twitterboostrap) ứng dụng (1) (/categories/449/p/1/ungdung) VMware (1) (/categories/89/p/1/vmware) Unity3D (13) (/categories/432/p/1/unity3d) Tips and tricks (2) (/categories/443/p/1/tipsandtricks) Uncategorized (29) (/categories/1/p/1/uncategorized) việc làm (99) (/categories/446/p/1/vieclam) WindowsPhone (44) (/categories/77/p/1/windowsphone) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg Java (70) (/categories/68/p/1/java) lập trình ios (70) (/categories/447/p/1/laptrinhios) lập trình ứng dụng iphone (32) (/categories/452/p/1/laptrinhungdungiphone) Node.js (29) (/categories/434/p/1/nodejs) Game (23) (/categories/93/p/1/game) Kiểm thử (5) (/categories/66/p/1/kiemthu) lập trình Android (18) (/categories/450/p/1/laptrinhandroid) Microsoft (16) (/categories/76/p/1/microsoft) Education (27) (/categories/6/p/1/education) Facebook (2) (/categories/257/p/1/facebook) HTML (4) (/categories/453/p/1/html) Linux (29) (/categories/71/p/1/linux) Cuộc sống (108) (/categories/74/p/1/cuocsong) Design (26) (/categories/69/p/1/design) Eletronics (1) (/categories/433/p/1/Eletronics) Git (3) (/categories/437/p/1/git) Cloud (7) (/categories/82/p/1/cloud) WordPress (1) (/categories/430/p/1/wordpress) 16/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Cơ sở 1: Số 14, ngõ 4, Nguyễn Đình Chiểu, Hai Bà Trưng, Hà Nội (http://techmaster.vn/trungtam/diachi#coso1) Cơ sở 2: Phòng 2304, tầng 23, toà nhà StarCity, 81 Lê Văn Lương, Nhân Chính, Thanh Xuân, Hà Nội (http://techmaster.vn/trungtam/diachi#coso2) Điện thoại: Mr. Cường: 090.220.9011 (tel:0902209011) ✉ Email: cuong@techmaster.vn (mailto:cuong@techmaster.vn) http://techmaster.vn/posts/33592/khoangtrangbianbenduoitheimg Mr. Cần: 093.222.5065 (tel:0932225065) 17/17 [...]... (/posts/33487/laptrinhwebfrontendvsbackendvsfullstack) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img 12/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Sự Khác Nhau Giữa Process Và Thread (/posts/33604/sukhacnhaugiuaprocessvathread) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img 13/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Ngôn Ngữ Lập Trình Tốt Nhất Để Học Trong...10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Unit Test Dùng Để Làm Gì Và Kinh Nghiệm Viết Unit Test Tốt Nhất (/posts/33618/unittestdungdelamgivakinhnghiemvietunittesttotnhat) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img 11/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Giải Mã Về 3 Loại Lập Trình Web: Front-end Vs Back-end... 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Cơ sở 1: Số 14, ngõ 4, Nguyễn Đình Chiểu, Hai Bà Trưng, Hà Nội (http:/ /techmaster. vn/trungtam/diachi#coso1) Cơ sở 2: Phòng 2304, tầng 23, toà nhà StarCity, 81 Lê Văn Lương, Nhân Chính, Thanh Xuân, Hà Nội (http:/ /techmaster. vn/trungtam/diachi#coso2) Điện thoại: Mr. Cường: 090.220.9011 (tel:0902209011) ✉ Email: cuong @techmaster. vn (mailto:cuong @techmaster. vn). .. 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Ngôn Ngữ Lập Trình Tốt Nhất Để Học Trong Năm 2015 (/posts/33442/ngonngulaptrinhtotnhat) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img 14/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Bùi Xuân Hiếu bxh.hieu @gmail.com Em thấy nội dung bài học khá ổn, tất cả các bài học đề có sample code cho học viên tham khảo. Tuy nhiên chương... Agile (8) (/categories/440/p/1/agile) Altassian (4) (/categories/72/p/1/altassian) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img Android (51) (/categories/78/p/1/android) 15/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img ASP.net (6) (/categories/86/p/1/aspnet) C++ (11) (/categories/438/p/1/c) công việc (101) (/categories/448/p/1/congviec) CSS (4) (/categories/454/p/1/css) Database (8) (/categories/435/p/1/database)... gian tới em mong muốn techmaster mở thêm một lớp về C++ và một khóa về cấu trúc dữ liệu và giải thuật để học viên có thể theo học và nâng cao tư duy lập trình. Nếu techmaster mở một trong hai lớp trên em sẽ theo học DANH MỤC BÀI VIẾT Agile (8) (/categories/440/p/1/agile) Altassian (4) (/categories/72/p/1/altassian) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img Android (51) (/categories/78/p/1/android)... Phòng 2304, tầng 23, toà nhà StarCity, 81 Lê Văn Lương, Nhân Chính, Thanh Xuân, Hà Nội (http:/ /techmaster. vn/trungtam/diachi#coso2) Điện thoại: Mr. Cường: 090.220.9011 (tel:0902209011) ✉ Email: cuong @techmaster. vn (mailto:cuong @techmaster. vn) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img Mr. Cần: 093.222.5065 (tel:0932225065) 17/17 ... PHP (55) (/categories/81/p/1/php) Python (9) (/categories/439/p/1/python) Scala (20) (/categories/73/p/1/scala) SharePoint (6) (/categories/75/p/1/sharepoint) Swift (8) (/categories/417/p/1/swift) TechMaster (104) (/categories/85/p/1 /techmaster) Tutor (65) (/categories/67/p/1/tutor) Twitter Boostrap (1) (/categories/442/p/1/twitterboostrap) ứng dụng (1) (/categories/449/p/1/ungdung) VMware (1) (/categories/89/p/1/vmware)... Tips and tricks (2) (/categories/443/p/1/tipsandtricks) Uncategorized (29) (/categories/1/p/1/uncategorized) việc làm (99) (/categories/446/p/1/vieclam) WindowsPhone (44) (/categories/77/p/1/windowsphone) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img Java (70) (/categories/68/p/1/java) lập trình ios (70) (/categories/447/p/1/laptrinhios) lập trình ứng dụng iphone (32) (/categories/452/p/1/laptrinhungdungiphone) ... Vậy là chúng ta đã khám phá được khoảng trắng bí ẩn bên dưới thẻ img. Và để xử lý khoảng trắng đó chúng ta có thể dùng các cách sau: Dùng thuộc tính verticalalign cho thẻ img với giá trị là middle... http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img 7/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img Thực Tập Lập Trình Dài Hạn 12 Tháng Tại Techmaster: Web Và Mobile (/posts/33583/thuctaplaptrinhwebmobile) http:/ /techmaster. vn/posts/33592/khoangtrangbianbenduoithe img. .. 2/17 10/29/2015 Khoảng trắng bí ẩn bên dưới thẻ img ❝ Khóa học HTML5, CSS3, JavaScript jQuery (http:/ /techmaster. vn/khoahoc/25487/webcobanhtml5 css3vajavascript) dạy từ căn bản cho người mới bắt đầu, có nhiều ví dụ mẫu, tip tricks để bạn có thể thiết kế