- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>«Выпадание» внешних отступов</title>
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="block-1">
<div class="block-2">Блок 2</div>
Блок 1
</div>
</body>
</html>
CSS
body {
padding: 0 20px;
}
.block-1 {
height: 100px;
border: none;
text-align: center;
}
.block-2 {
margin-left: 20px;
margin-right: 20px;
text-align: center;
}
ЗадачиВыполнено
- Второму блоку задайте
margin-top: 20px;. - Первому блоку задайте
margin-top: 40px;, - затем ему же задайте
border: 1px solid white; - и
padding-top: 20px;.
Обратите внимание на отступ от края первого блока до второго блока. Он будет размером 40px (2 клеточки).