Đây là một câu hỏi đơn giản và câu trả lời không đơn giản như vậy. Người ta có thể cố gắng tránh những khoảng trống trong mã nguồn mà không phải lúc nào cũng có thể đạt được trong CMS, bởi vì chúng được hệ thống tự động chèn vào. Nếu bạn muốn thay đổi điều này, bạn phải tìm hiểu sâu về mã cốt lõi của CMS. Sau đó, bạn có thể thử sử dụng hình ảnh nổi bên trái. Nhưng điều này thật nguy hiểm. Lúc đầu, bạn không thực sự có quyền kiểm soát việc căn chỉnh dọc theo
định nghĩa. Và thứ hai, bạn rơi vào tình trạng hỗn loạn hoàn toàn nếu bạn có quá nhiều phần tử nổi, đến nỗi chúng trải dài trên nhiều dòng. Và nếu bạn có một bố cục dựa trên các yếu tố nổi bên trái (hầu hết chúng đều làm như vậy ngày nay), bạn thậm chí có thể phá vỡ một số kiểu nổi bên ngoài, nếu bạn xóa nổi sau các hình ảnh. Điều này có thể được ghi đè, nếu bạn thả nổi bất kỳ phần tử nào xung quanh. Không được khuyến khích. Vì vậy, giải pháp duy nhất sẽ là một khai báo CSS xử lý quá trình
xử lý khoảng trắng. Đây không phải là một phần của bất kỳ tiêu chuẩn nào (vì CSS 3 vẫn chưa hoàn thành). Tôi thích không có khoảng trắng trong biến thể HTML. Với việc sử dụng drupal làm CMS, điều này có thể đạt được khá dễ dàng trong các tệp template.php và theming của bạn. Sau đó, tôi chọn khối nội tuyến. Tái bút: khối nội tuyến khá phức tạp để truy cập vào các trình duyệt khác nhau. Đối với FF 2, bạn cần hiển thị: -moz-inline-box. Phần còn lại và IE8 có thể có hiển thị:
inline-block ngay sau đó. Và đối với IE 7, bạn cần hiển thị: nội dòng trong một khai báo riêng biệt sau (tốt hơn là thông qua các chú thích có điều kiện). biên tập Những gì tôi sử dụng để tạo một khối nội tuyến phần tử elem.inline {
display: -moz-inline-box; /* FF2 */
display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * + html hack for IE 7 */
* + html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
2 hữu ích 0 bình luận chia sẻ answer 911 Vì câu trả lời này đã trở nên khá phổ biến, tôi viết lại nó một cách đáng kể. Chúng ta đừng quên câu hỏi thực tế đã được hỏi: Làm thế nào để loại bỏ không
gian giữa các yếu tố khối nội tuyến ? Tôi đã hy vọng một giải pháp CSS không yêu cầu mã nguồn HTML bị giả mạo. Vấn đề này có thể được giải quyết chỉ với CSS không?
Đó là khả năng để giải quyết vấn đề này với một mình CSS, nhưng không có
hoàn toàn sửa CSS mạnh mẽ. Giải pháp tôi có trong câu trả lời ban đầu của mình là thêm font-size: 0vào phần tử cha mẹ, và sau đó tuyên bố một điều hợp lý font-sizevới con cái. http://jsfiddle.net/thundreddot/dGHFV/1361/ Điều này hoạt động trong các phiên bản gần đây của tất cả các trình duyệt hiện đại. Nó hoạt động trong IE8. Nó không làm việc trong Safari 5, nhưng nó không làm việc trong Safari 6. Safari 5 là gần một trình duyệt chết (
0,33%, tháng 8 năm 2015 ). Hầu hết các vấn đề có thể xảy ra với kích thước phông chữ tương đối không phức tạp để khắc phục. Tuy nhiên, mặc dù đây là một giải pháp hợp lý nếu bạn đặc
biệt chỉ cần sửa CSS, nhưng đó không phải là điều tôi khuyên nếu bạn có thể tự do thay đổi HTML của mình (như hầu hết chúng ta đều như vậy).
Đây là những gì tôi, với tư cách là một nhà phát triển web có kinh nghiệm hợp lý, thực sự làm để giải quyết vấn đề này: <p>
<span>Foo</span><span>Bar</span>
</p>
Vâng đúng vậy. Tôi xóa khoảng trắng trong HTML giữa các thành phần khối nội tuyến. Dễ
thôi. Thật đơn giản. Nó hoạt động ở khắp mọi nơi. Đó là giải pháp thực dụng. Đôi khi bạn phải xem xét cẩn thận khoảng trắng sẽ đến từ đâu. Sẽ nối thêm một phần tử khác với JavaScript thêm khoảng trắng? Không, không nếu bạn làm điều đó đúng. Chúng ta hãy thực hiện một hành trình kỳ diệu theo nhiều cách khác nhau để xóa khoảng trắng,
với một số HTML mới: <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Bạn có thể làm điều này, như tôi thường làm: <ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thundreddot/dGHFV/1362/ Hoặc, cái này: <ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>
Hoặc, sử dụng nhận xét: <ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>
Hoặc, nếu bạn đang sử dụng PHP hoặc
tương tự: <ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>
Hoặc, bạn thậm chí
có thể bỏ qua hoàn toàn các thẻ đóng nhất định (tất cả các trình duyệt đều ổn với điều này):
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
Bây giờ tôi đã đi và chán bạn đến chết với "một ngàn cách khác nhau để xóa khoảng trắng, bằng ba mươi phút", hy vọng bạn đã quên tất cả về font-size: 0.
Ngoài ra, giờ đây bạn
có thể sử dụng flexbox để đạt được nhiều bố cục mà trước đây bạn có thể đã sử dụng khối nội tuyến cho: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 911 hữu ích 5 bình luận chia sẻ answer 148 Đối với các trình duyệt tuân thủ CSS3, có white-space-collapsing:discard xem:
http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing 148 hữu
ích 5 bình luận chia sẻ answer 86 OK, mặc dù tôi đã đưa ra cả câu trả lời
font-size: 0;và not implemented CSS3 featurecâu trả lời, sau khi thử tôi phát hiện ra rằng không ai trong số chúng là giải pháp thực sự . Trên thực tế, thậm chí không có một cách giải quyết nào mà không có tác dụng phụ mạnh. Sau đó, tôi quyết định xóa khoảng
trắng (câu trả lời này là về đối số này) giữa các inline-blockdiv khỏi HTMLnguồn của tôi ( JSP), biến điều này: <div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
đến đây <div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
đó là xấu xí, nhưng làm việc Nhưng, chờ một phút ... những gì nếu tôi là tạo ra divs của tôi bên trong
Taglibs loops( Struts2, JSTL, vv ...)? Ví dụ: <s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>
Hoàn toàn không thể nghĩ đến nội tuyến tất cả những thứ đó, nó có nghĩa là <s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>
điều đó không thể đọc được, khó hiểu và hiểu, v.v ... Giải pháp tôi tìm thấy: sử dụng
nhận xét HTML để kết nối phần cuối của một div với phần đầu của phần tiếp theo!
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>
Bằng cách này, bạn sẽ có một mã thụt lề có thể đọc và chính xác. Và, như một tác dụng phụ tích cực HTML source, mặc dù bị nhiễm bởi các bình luận trống rỗng, sẽ dẫn đến thụt lề chính xác; hãy lấy ví dụ đầu tiên. Theo ý kiến khiêm tốn của tôi, điều
này: <div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
tốt hơn thế này: <div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
86 hữu ích 1 bình luận chia
sẻ answer 39 Thêm ý kiến giữa các yếu tố để KHÔNG có một khoảng trắng. Đối với tôi nó dễ hơn là đặt lại kích thước phông chữ về 0 và sau đó đặt
lại. <div>
Element 1
</div><!--
--><div>
Element 2
</div>
39 hữu ích 0 bình luận chia sẻ answer 33 33 hữu ích
4 bình luận chia sẻ answer
30 Đây là cùng một câu trả lời tôi đã đưa ra về liên quan:
Hiển thị: Khối nội tuyến - Không gian đó là gì? Thực sự có một cách thực sự đơn giản để loại bỏ khoảng trắng khỏi khối nội tuyến vừa dễ dàng vừa có ngữ nghĩa. Nó được gọi là phông chữ tùy chỉnh với khoảng trắng có độ rộng bằng 0, cho phép bạn thu gọn khoảng trắng (được trình duyệt thêm
vào cho các thành phần nội tuyến khi chúng nằm trên các dòng riêng biệt) ở cấp độ phông chữ sử dụng phông chữ rất nhỏ. Khi bạn khai báo phông chữ, bạn chỉ cần thay đổi font-familytrên thùng chứa và trở lại trên trẻ em và voila. Như thế này: @font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Phù hợp với khẩu vị. Đây là một bản tải xuống cho phông chữ tôi vừa nấu trong font-forge và được chuyển đổi với trình tạo webfont FontSquirrel.
Mất tất cả 5 phút. @font-faceKhai báo css được bao gồm: phông chữ không gian có độ rộng bằng không được nén . Nó có trong Google Drive, vì vậy bạn sẽ cần nhấp vào Tệp> Tải xuống để lưu nó vào máy tính của mình. Có lẽ bạn
cũng cần thay đổi đường dẫn phông chữ nếu bạn sao chép khai báo vào tệp css chính của mình. 30 hữu ích 3 bình luận
chia sẻ answer 24 Thêm vào display: flex;phần tử cha. Đây là giải pháp có tiền tố: p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Cập nhậtPhiên bản đơn giản hóa p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
24 hữu ích
1 bình luận chia sẻ answer
19 Hai tùy chọn khác dựa trên
Mô-đun Văn bản CSS Cấp 3 (thay vì white-space-collapsing:discardđã bị loại khỏi dự thảo thông số kỹ thuật): Về lý thuyết, cần thực hiện chính xác những gì cần thiết - rút ngắn khoảng
trắng giữa 'từ' bằng 100% chiều rộng ký tự khoảng trắng, tức là bằng không. Nhưng dường như không hoạt động ở bất cứ đâu, thật không may, và tính năng này được đánh dấu là 'có nguy cơ' (nó cũng có thể bị loại bỏ khỏi đặc điểm kỹ thuật). Nó rút ngắn khoảng trắng giữa các từ bằng độ rộng của chữ số '0'. Trong một phông chữ đơn cách, nó phải chính xác bằng chiều rộng của ký tự khoảng trắng (và bất kỳ ký tự nào
khác). Điều này hoạt động trong Firefox 10+, Chrome 27+ và gần như hoạt động trong Internet Explorer 9+. Vĩ cầm
19 hữu ích 3 bình luận chia sẻ answer 17 Thật không may, đó là năm 2015 và white-space-collapsevẫn chưa được thực hiện. Trong khi đó, đưa ra yếu tố cha mẹ font-size: 0;và thiết lập
font-sizecon cái. cái này cần phải dùng mẹo 17 hữu ích 0 bình luận chia sẻ answer 15 Sử dụng flexbox và thực hiện dự phòng (từ các đề xuất ở trên) cho các trình duyệt cũ hơn: ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
15 hữu ích 0 bình luận chia sẻ answer 11 cỡ chữ: 0; có thể khó hơn một chút để quản lý ... Tôi nghĩ rằng các dòng sau đây tốt hơn nhiều và có thể sử dụng lại nhiều hơn và tiết kiệm thời gian hơn bất kỳ phương pháp nào khác.
Cá nhân tôi sử dụng điều này: .inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}
/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}
Sau đó, bạn có thể sử dụng nó như sau ... <ul class="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Theo như tôi biết (tôi có thể sai) nhưng tất cả các trình duyệt đều hỗ trợ phương pháp này. GIẢI THÍCH : Điều này hoạt động (có thể -3px có thể tốt hơn) chính xác như bạn dự đoán nó sẽ hoạt động. - bạn
sao chép và dán mã (một lần)
- sau đó trên html của bạn chỉ cần sử dụng
class="items"trên cha mẹ của mỗi khối nội tuyến.
Bạn sẽ KHÔNG cần phải quay lại css và thêm quy tắc css khác cho các khối nội tuyến mới của bạn. Giải quyết hai vấn đề cùng một lúc. Cũng lưu ý >(lớn hơn dấu) điều này có nghĩa là * / tất cả
trẻ em phải là khối nội tuyến. http://jsfiddle.net/fD5u3/ LƯU Ý: Tôi đã sửa đổi để phù hợp với kế thừa khoảng cách chữ cái khi một trình bao bọc có một trình bao bọc con. 11 hữu ích 1 bình luận chia sẻ answer 11 Mặc dù, về mặt kỹ thuật không phải là một câu trả lời cho câu hỏi: "Làm cách nào để xóa khoảng trắng giữa các thành phần khối nội tuyến?" Bạn có thể thử giải pháp flexbox và áp dụng mã bên dưới và không
gian sẽ bị xóa. p {
display: flex;
flex-direction: row;
}
Bạn có thể tìm hiểu thêm về nó trên liên kết này: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
11 hữu ích 1 bình luận chia sẻ answer 10 Đơn giản: item {
display: inline-block;
margin-right: -0.25em;
}
Không cần phải chạm vào phần tử cha. Chỉ có điều kiện ở đây: kích thước phông chữ của mục không được xác định (phải bằng kích thước phông chữ của cha
mẹ). 0.25em là mặc định word-spacing
W3Schools - thuộc tính khoảng cách 10 hữu ích 0 bình luận chia sẻ answer 8 Tôi đã gặp vấn đề này ngay bây giờ và từ khi font-size:0;tôi phát hiện ra rằng trong Internet Explorer 7, vấn đề vẫn còn do Internet Explorer nghĩ rằng "Cỡ chữ 0?!?! WTF bạn có phải là người điên không?" - Vì vậy,
trong trường hợp của tôi, tôi đã thiết lập lại CSS của Eric Meyer và với font-size:0.01em;tôi có sự khác biệt 1 pixel từ Internet Explorer 7 và Firefox 9, vì vậy, tôi nghĩ rằng đây có thể là một giải pháp. 8 hữu ích
0 bình luận chia sẻ answer
8 Nói chung, chúng tôi sử dụng các yếu tố như thế này trong các dòng khác
nhau, nhưng trong trường hợp display:inline-blocksử dụng các thẻ trong cùng một dòng sẽ xóa khoảng trắng, nhưng trong một dòng khác thì không. Một ví dụ với các thẻ trong một dòng khác nhau: p span {
display: inline-block;
background: red;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Ví dụ với các thẻ trong cùng một dòng p span {
display: inline-block;
background: red;
}
<p>
<span> Foo </span><span> Bar </span>
</p>
Một phương pháp hiệu quả khác là một công việc CSS đang sử dụng font-size:0cho phần tử cha và cung cấp cho font-sizephần tử con nhiều như bạn muốn. p {
font-size: 0;
}
p span {
display: inline-block;
background: red;
font-size: 14px;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Các phương pháp trên có thể không hoạt động ở đâu đó tùy thuộc vào toàn bộ ứng dụng, nhưng phương pháp cuối cùng là một giải pháp
hoàn hảo cho tình huống này và có thể được sử dụng ở bất cứ đâu.
8 hữu ích 1 bình luận
chia sẻ answer 8 Tôi không chắc chắn nếu bạn muốn tạo hai nhịp màu xanh mà không có khoảng cách hoặc muốn xử lý khoảng trắng khác, nhưng nếu bạn muốn xóa khoảng cách: span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
float: left;
}
Và
thực hiện. 8 hữu ích 0 bình luận chia sẻ answer 6 Gần đây tôi đã giải quyết vấn đề này và thay vì đặt cha mẹ font-size:0sau đó đặt con về giá trị hợp lý, tôi đã nhận được kết quả nhất quán bằng cách đặt thùng chứa cha mẹ letter-spacing:-.25emsau
đó con quay lại letter-spacing:normal. Trong một chủ đề thay thế, tôi thấy một nhà bình luận đề cập font-size:0không phải lúc nào cũng lý tưởng bởi vì mọi người có thể kiểm soát kích thước phông chữ tối thiểu trong trình duyệt của họ, phủ nhận hoàn toàn khả năng đặt kích thước phông chữ thành 0. Sử dụng ems dường như hoạt động bất kể kích thước phông chữ được chỉ định là 100%, 15pt hay
36px. http://cdpn.io/dKIjo 6 hữu ích 1 bình luận
chia sẻ answer 5 p {
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: red;
font-size: 30px;
color: white;
}
<p>
<span> hello </span>
<span> world </span>
</p>
5 hữu ích 1 bình luận chia sẻ answer 5 Tôi nghĩ rằng có một phương pháp rất đơn giản / cũ cho phương pháp này được hỗ trợ bởi tất cả các trình duyệt ngay cả IE 6/7. Chúng ta có thể chỉ cần đặt letter-spacingthành một giá trị âm lớn trong
phần gốc và sau đó đặt lại normalthành phần tử con: body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */
.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>
<div class="">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>
<hr/>
<p style="color:green">Correct (no-spacing):</p>
<div class="no-spacing">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>
5 hữu ích 5 bình luận chia sẻ answer 3 Với dấu ngoặc PHP: ul li {
display: inline-block;
}
<ul>
<li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li>
</ul>
3 hữu ích 0 bình luận chia sẻ answer 3 Câu trả lời đơn giản nhất cho câu hỏi này là thêm. css float: left;
liên kết mã hóa:
http://jsfiddle.net/dGHFV/3560/ 3 hữu ích 1 bình
luận chia sẻ answer 2 Tôi sẽ mở rộng câu trả lời của người dùng5609829 một chút vì tôi tin rằng các giải pháp khác ở đây quá phức tạp / quá nhiều công việc. Áp dụng a
margin-right: -4pxcho các thành phần khối nội tuyến sẽ loại bỏ khoảng cách và được tất cả các trình duyệt hỗ trợ. Xem các fiddle cập nhật ở đây . Đối với những người quan tâm đến việc sử dụng lợi nhuận âm, hãy thử đọc cái
này . 2 hữu ích
1 bình luận chia sẻ answer
1 Đặc
tả cấp 4 của Mô-đun văn bản CSS xác định một thuộctext-space-collapse tính, cho phép kiểm soát cách xử lý khoảng trắng bên trong và xung quanh một phần tử. Vì vậy, liên quan đến ví dụ của bạn, bạn sẽ phải viết điều này: p {
text-space-collapse: discard;
}
Thật không may, chưa có trình duyệt nào đang
triển khai thuộc tính này (kể từ tháng 9 năm 2016) như được đề cập trong các nhận xét cho câu trả lời của HBP . 1 hữu ích 0 bình luận chia sẻ answer 1 Thêm vào white-space: nowrapphần tử container: CSS: * {
box-sizing: border-box;
}
.row {
vertical-align: top;
white-space: nowrap;
}
.column{
float: left;
display: inline-block;
width: 50% // Or whatever in your case
}
HTML: <div class="row">
<div class="column"> Some stuff</div>
<div class="column">Some other stuff</div>
</div>
Đây là
Plunker . 1 hữu ích
0 bình luận chia sẻ answer
1 Tôi đã thử font-size: 0giải pháp cho một vấn đề
tương tự trong React và Sass cho dự án Free Code Camp mà tôi hiện đang làm việc. Và nó hoạt động! Đầu tiên, kịch bản: var ActionBox = React.createClass({
render: function() {
return(
<div id="actionBox">
</div>
);
},
});
var ApplicationGrid = React.createClass({
render: function() {
var row = [];
for(var j=0; j<30; j++){
for(var i=0; i<30; i++){
row.push(<ActionBox />);
}
}
return(
<div id="applicationGrid">
{row}
</div>
);
},
});
var ButtonsAndGrid = React.createClass({
render: function() {
return(
<div>
<div id="buttonsDiv">
</div>
<ApplicationGrid />
</div>
);
},
});
var MyApp = React.createClass({
render: function() {
return(
<div id="mainDiv">
<h2> Game of Life! </h2>
<ButtonsAndGrid />
</div>
);
},
});
ReactDOM.render(
<MyApp />,
document.getElementById('GoL')
);
Sau đó, Sass: html, body
height: 100%
body
height: 100%
margin: 0
padding: 0
#mainDiv
width: 80%
height: 60%
margin: auto
padding-top: 5px
padding-bottom: 5px
background-color: DeepSkyBlue
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#buttonsDiv
width: 80%
height: 60%
margin: auto
margin-bottom: 0px
padding-top: 5px
padding-bottom: 0px
background-color: grey
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#applicationGrid
width: 65%
height: 50%
padding-top: 0px
margin: auto
font-size: 0
margin-top: 0px
padding-bottom: 5px
background-color: white
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#actionBox
width: 20px
height: 20PX
padding-top: 0px
display: inline-block
margin-top: 0px
padding-bottom: 0px
background-color: lightgrey
text-align: center
border: 2px solid grey
margin-bottom: 0px
1 hữu ích 0 bình luận chia sẻ answer 1 Chỉ để cho vui: một giải pháp JavaScript dễ dàng. document.querySelectorAll('.container').forEach(clear);
function clear(element) {
element.childNodes.forEach(check, element);
}
function check(item) {
if (item.nodeType === 3) this.removeChild(item);
}
span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}
<p class="container">
<span> Foo </span>
<span> Bar </span>
</p>
1 hữu ích 0 bình luận chia sẻ answer 1 Có rất nhiều giải pháp như font-size:0, word-spacing, margin-left, letter-spacingvà vân vân. Thông thường tôi
thích sử dụng letter-spacingvì - Có vẻ ổn khi chúng ta gán một giá trị lớn hơn chiều rộng của không gian thừa (ví dụ
-1em). - Tuy nhiên, nó sẽ không ổn với
word-spacingvà margin-leftkhi chúng ta đặt giá trị lớn hơn như thế nào -1em. - Sử dụng
font-sizekhông thuận tiện khi chúng ta cố gắng sử dụng emnhư font-sizeđơn vị.
Vì vậy, letter-spacingdường như là sự lựa chọn tốt nhất. Tuy nhiên, tôi phải cảnh báo bạn khi bạn sử dụng letter-spacingbạn đã sử dụng tốt hơn
-0.3emhoặc -0.31emkhông sử dụng người khác. * {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
cursor: auto;
}
.nav {
width: 260px;
height: 100px;
background-color: pink;
color: white;
font-size: 20px;
letter-spacing: -1em;
}
.nav__text {
width: 90px;
height: 40px;
box-sizing: border-box;
border: 1px solid black;
line-height: 40px;
background-color: yellowgreen;
text-align: center;
display: inline-block;
letter-spacing: normal;
}
<nav class="nav">
<span class="nav__text">nav1</span>
<span class="nav__text">nav2</span>
<span class="nav__text">nav3</span>
</nav>
Nếu bạn đang sử dụng Chrome (phiên bản thử nghiệm 66.0.3359.139) hoặc Opera (phiên bản thử nghiệm 53.0.2907.99), những gì bạn thấy có thể là: Nếu bạn đang sử dụng Firefox (60.0.2), IE10 hoặc Edge, những gì bạn thấy có thể là: Nó thật thú vị. Vì vậy, tôi đã kiểm tra
khoảng cách chữ cái và tìm thấy nó: chiều dài Chỉ định không gian liên ký tự bổ sung ngoài không gian mặc định giữa các ký tự. Các giá trị có thể âm, nhưng có thể có các giới hạn cụ thể thực hiện. Tác nhân
người dùng không được tăng hoặc giảm thêm không gian giữa các ký tự để chứng minh văn bản.
Có vẻ như đây là lý do. 1 hữu ích
0 bình luận chia sẻ answer
1 Thêm letter-spacing:-4px;vào
pcss cha và thêm letter-spacing:0px;vào spancss của bạn . span {
display:inline-block;
width:100px;
background-color:palevioletred;
vertical-align:bottom;
letter-spacing:0px;
}
p {
letter-spacing:-4px;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
1 hữu ích 0 bình luận chia sẻ answer 0 Một cách khác mà tôi tìm thấy là áp dụng lề trái làm giá trị âm trừ phần tử đầu tiên của hàng. span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}
0 hữu ích 0 bình luận chia sẻ answer 0 Mỗi câu hỏi, cố gắng loại bỏ khoảng cách giữa inline-blockcác s có vẻ như <table>đối với tôi ... Hãy thử một cái gì đó như thế này:
p {
display: table;
}
span {
width: 100px;
border: 1px solid silver; /* added for visualization only*/
display: table-cell;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
0 hữu ích 0 bình luận chia sẻ | 
