html 空格不起作用,html – 内联块空格修复不起作用

Inline-block: whitespace surrounding inline-block elements becomes

relevant, it behaves just like text.

我建议三种解决方案来克服这个问题(可能还有更多)：

1)使用float的解决方案：left而不是display：inline-block

.content-wrap {

word-spacing: -4px;

}

.col1,

.col2,

.col3,

.col4,

.col5,

.col6,

.col7,

.col8,

.col9,

.col10,

.col11,

.col12,

.col13,

.col14,

.col15,

.col16,

.col17,

.col18 {

display: inline-block;

vertical-align: top;

background-color: #eee;

padding: 0;

margin: 0;

font-size: 16px;

}

.col9 {

width: 50%;

}

.row{

font-size: 0;

}

col 1

col 1

col 1

col 1

col 1

col 1

2)使用font-size的解决方案：0表示父亲和希望孩子：

.content-wrap {

word-spacing: -4px;

}

.col1,

.col2,

.col3,

.col4,

.col5,

.col6,

.col7,

.col8,

.col9,

.col10,

.col11,

.col12,

.col13,

.col14,

.col15,

.col16,

.col17,

.col18 {

display: inline-block;

vertical-align: top;

background-color: #eee;

padding: 0;

margin: 0;

font-size: 16px;

}

.col9 {

width: 50%;

}

.row{

font-size: 0;

}

col 1

col 1

col 1

col 1

col 1

col 1

3)使用flex的解决方案：

.content-wrap {

word-spacing: -4px;

}

.col1,

.col2,

.col3,

.col4,

.col5,

.col6,

.col7,

.col8,

.col9,

.col10,

.col11,

.col12,

.col13,

.col14,

.col15,

.col16,

.col17,

.col18 {

display: inline-block;

vertical-align: top;

background-color: #eee;

padding: 0;

margin: 0;

}

.col9 {

width: 50%;

}

.row {

display: flex;

col 1

col 1

col 1

col 1

col 1

col 1