Вопрос заключается в работе "margin"?

Question

Вопрос к блоку и классу "item-about__icon" В чем суть. Я хотел центрировать блок и задать ему отступ, но в такой форме записи margin: 0px auto; не работает. Если же указать таким образом: margin: 0px auto 40px auto; все работает. И ВОТ ВОПРОС ПОЧЕМУ?

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 400;
}

body {
  font-family: Lato;
}

.about__body {
  max-width: 823px;
  margin: 0px auto;
}

.about__header {
  margin: 0px 0px 70px 0px;
}

.about__title {
  margin: 0px 0px 37px 0px;
}

.about__text {
  max-width: 693px;
  font-size: 14px;
  line-height: 25px;
  font-weight: 300;
  color: #868585;
  text-align: center;
  margin: 0px auto;
}

.about__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0;
  margin: 0px -15px;
}

.about__column {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.333%;
          flex: 0 0 33.333%;
  padding: 0px 15px;
}

.title {
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  position: relative;
  padding: 0px 0px 33px 0px;
  text-align: center;
}

.title::after {
  content: '';
  width: 82px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: 0px;
  background-color: black;
  margin: 0px 0px 0px -41px;
}

.item-about__icon {
  margin: 0px auto;
  border-radius: 50%;
  width: 92px;
  height: 92px;
  border: 2px solid #f0f0f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0px 0px 40px 0px;
}

.item-about__title {
  text-align: center;
  color: black;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 3.52px;
  margin: 0px 0px 35px 0px;
}

.item-about__text {
  text-align: center;
  font-size: 14px;
  line-height: 26px;
  font-weight: 300;
  color: #868585;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="about">
        <div class="about__body">
            <div class="about__header">
                <div class="about__title title">ABOUT</div>
                <div class="about__text">We specialize in contemporary, functional, and stunning websites with design that really brings that "WOW" factor. 
                    In our design process, we make sure to stay one step ahead of the latest trends, <br>
                    never forgetting to abide by key web standards.</div>
            </div>
            <div class="about__row">
                <div class="about__column">
                    <div class="item-about">
                        <div class="item-about__icon"><img src="img/icon/01.png" alt=""></div>
                        <div class="item-about__title">WEB</div>
                        <div class="item-about__text">We tend to deliver unique and 
                            functional design, through 
                            innovation and creativity.</div>
                    </div>
                </div>
                <div class="about__column">
                    <div class="item-about">
                        <div class="item-about__icon"><img src="img/icon/02.png" alt=""></div>
                        <div class="item-about__title">iOS AND ANDROID</div>
                        <div class="item-about__text">We seek to bring new businesses and 
                            customers closer together through valuable 
                            insights and proper targeting.</div>
                    </div>
                </div>
                <div class="about__column">
                    <div class="item-about">
                        <div class="item-about__icon"><img src="img/icon/03.png" alt=""></div>
                        <div class="item-about__title">MARKETING</div>
                        <div class="item-about__text">We’ll help you establish the right goals 
                            and build the right paths. Success depends 
                            on setting the right intention.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

Вот с такими стилями, блок становится по центру. (уточните пожалуйста вопрос)

.item-about__icon {
  margin: 0 auto;
  border-radius: 50%;
  width: 92px;
  height: 92px;
  border: 2px solid #f0f0f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}

И не совсем понятно, для чего у Вас два раза был задан margin, для примера или у Вас какая-то своя задумка =)

БЛОГ НА HUSL

Вопрос заключается в работе "margin"?

Ответы (1 шт):