У меня есть элемент с шириной 70%, и он плавает рядом с элементом с 30% шириной, но когда я добавляю 25px
для заполнения, он расширяет элемент и разбивает формат, есть ли способ сделать это просто увеличьте расстояние содержимого от края, а не просто увеличите его?
Сохранить отступы от создания элемента больше?
Ответ 1
Когда вы используете модель border-box
, отступы включаются в размер окна. Подробнее см. здесь.
<!DOCTYPE html>
<html>
<head>
<title>padding example</title>
<style type="text/css">
.seventy {
display: block;
float: left;
width: 70%;
background-color: red;
}
.thirty {
display: block;
float: left;
width: 30%;
padding: 25px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: green;
}
</style>
</head>
<body>
<div class="seventy">Stuff</div>
<div class="thirty">More Stuff</div>
</body>
</html>
Ответ 2
Я бы создал еще один элемент того же типа (могу ли я догадаться, что это div?) внутри элемента и установил, что у него есть отступы /margin 25px.
Например:
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>