CSS. Начальный курс

Вместо того, чтобы указывать свойства элемента padding-top, padding-right, padding-bottom и padding-left по отдельности по отдельности, вы можете указать их все в одной строке, например:

h1{
padding: 10px 20px 10px 20px;
}

Задание:

Используя свойство padding установите следующие отступы для класса blue-box: сверху- 40px, справа - 20px, снизу - 15px, слева - 10px

Используя свойство padding установите следующие отступы для класса red-box: сверху и снизу- 40px, слева и справа - 20px (используйте два значения)

Используя свойство margin установите следующие отступы для класса blue-box: сверху- 10px, справа - 5px, снизу - 15px, слева - 10px

Используя свойство padding установите следующие отступы для класса yellow-box: сверху- 10px, справа и слева - 5px, снизу - 15px (используйте тири значения)

<html>
  <head>
  </head>
  <body>
  	<main>
      <h2>My First Web App</h2>
      <img src="https://bit.ly/3rewVSk" class="image-border small-image"/>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <a href="#">Ссылка</a>
      <div class="yellow-box">
  			<div class="red-box">margin</div>
 				<div class="blue-box">margin</div>
			</div>
		</main>
  </body>
</html>

.small-image{
	width:300px;
}
.image-border{
  border-color:red;
  border-style: solid;
  border-width:10px;
  border-radius: 10px;
}

.yellow-box {
  background-color:yellow;
}

.red-box {
background-color:red;
}

.blue-box {
background-color:blue;
}

Result

CSS. Начальный курс

Практика. Используем более короткий синтаксис для margin и padding

IT Junior

Курсы

Полезные ссылки

Контакты