<input class="i1" type="radio" id="toggle" name="toggle">
<label for="toggle" class="to-be-changed">Нажми меня!
<p >Здесь будет красный цвет. Или уже есть...</p>
</label >
<input class="i2" type="radio" id="toggle2" name="toggle">
<label for="toggle2" class="to-be-changed2">Нажми меня!
<p >Здесь будет красный цвет. Или уже есть...</p>
</label >input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
.i1:checked ~ .to-be-changed,
.i2:checked ~ .to-be-changed2{
background: red;
}<div class="container">
<div class="container-block panel -gray">
<div class="panel-element -light-gray"></div>
<div class="panel-element -light-gray"></div>
<div class="panel-element -light-gray"></div>
<div class="panel-element -light-gray"></div>
</div>
<div class="container-block promo -gray"></div>
<div class="container-block content">
<div class="aside">
<div class="menu">
<div class="menu-item -gray"></div>
<div class="menu-item -gray"></div>
<div class="menu-item -gray"></div>
</div>
<div class="banner -gray"></div>
</div>
<div class="main -gray"></div>
</div>
<div class="container-block panel -gray"></div>
</div>* {
box-sizing: border-box;
}
body {
margin: 0;
}
.-gray {
background-color: #333;
}
.-light-gray {
background-color: #d6d6d6;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
min-height: 100vh;
}
.container-block + .container-block {
margin-top: 30px;
}
.panel {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
padding: 10px;
height: 50px;
}
.panel::after {
content: '';
flex: 1;
}
.panel-element {
width: 75px;
height: 30px;
}
.panel-element + .panel-element {
margin-left: 10px;
}
.panel-element:last-child {
order: 1;
}
.promo {
height: 120px;
}
.content {
flex: 1;
display: flex;
justify-content: space-between;
align-items: stretch;
padding-left: 30px;
padding-right: 30px;
}
.aside {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 200px;
margin-right: 30px;
}
.main {
flex: 1;
}
.menu-item {
height: 40px;
}
.menu-item + .menu-item {
margin-top: 15px;
}
.banner {
margin-top: 30px;
height: 150px;
}Причина кроется в том, что, inline-block ведет себя, как обычная буква, а значит так же, как и простой текст — имеет пробелы между словами. Эти пробелы можно отчётливо наблюдать в разных веб-инспекторах, например таких как "IE WebDeveloper" для Internet Explorer.
Браузер создаёт пустой текстовый узел, который, по сути, может являться переводом строки, пробелом или, например, табом. Все и эти перечисленные вещи превращаются в один единственный пробел и описывается следующей сущностью: . Так же следует учитывать, что, так как пробел — это обычный символ, то, соответственно, и изменяться этот самый символ будет в зависимости от размера или семейства шрифта, т.е, по сути, вести себя точно также, как и обычная буква в строке. Всё это обязательно следует учитывать при вёрстке.
.author-wrapper {
font-size: 0;
line-height: 0;
}
.sign-social,
.author-submit {
font-size: normal;
line-height: normal;
}table tr td{
text-align: right;
}
table tr td:first-child{
text-align: left;
}