Почему при добавлении текста получается вылет с родительского элемента?

Вообщем решил начать учить верстку.
Почти сразу же возник вопрос почему при добавлении текста в inline-block'овый элемент получается вылет с родительского элемента?
прилагаю скрины и код
ab3e1105c8f34ccdbba846143492792c.jpg3e5fde158a2444328294bdd3d6403c97.jpgf1485c696303491e99b8e7bb2a0fece0.jpg56c8a7480c984ed995a71661a6192681.jpg
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ответы на вопрос 2
SvDenys
@SvDenys
Интересуюсь веб-разработкой
Вот видеоурок по верстке именно этого макета, должен вам помочь:
https://www.youtube.com/watch?v=b-iwbdhxWDs
Потому что сейчас верстка не совсем корректная, проще переделать, чем править ошибки.
Ответ написан
Комментировать
@Donalds
<body>
  <header id="header1">
			<div class="header">
			  <div class="red_button">
				Тут текст
			  </div>
        <div class="red_triangke">
			  </div>
			</div>
  </header>
</body>


#header1  {
    width: 100%;
    background: url();
    background-color: #343434;
    height: 67px;               
}
.header {
    height: 100%;
    margin: 0 auto;
    float: left;
    position: relative;
}
.red_button {
    height: 100%;
    width: 80px;
    background: #ff6c4c;
    color: #fff;
    word-wrap: break-word;
    float: left;
}
.red_triangke {
		border: 20px solid transparent;
    border-left: 20px solid #ff6c4c;
    display: inline-block;
    margin-left: -10px;
    vertical-align: -40px;
}


Вот пример cssdeck.com/labs/ibnnsbcj
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы