Kevin Powell - Community•11mo ago

Margin auto doesn't work as I expected

I am trying to put .left and .right elements evenly within .header-content using margin: 0 auto. When I apply the rule, it doesn't do anything, why? HTML:

<header>
      <div class="header-content">
        <div class="left">
          <img src="." alt="Go to main page" class="logo" />
          <button class="header-button">Каталог</button>
          <button class="header-button">Топы</button>
          <button class="header-button search">
            <img src="." alt="Search" />
            <p>Поиск</p>
          </button>
        </div>
        <div class="right">
          <button class="header-button">Закладки</button>
          <button class="header-button black-white-theme"></button>
          <button class="header-button settings">
            <img src="." alt="Press to get to settings" />
          </button>
          <button class="header-button log-in">Войти</button>
        </div>
      </div>
    </header>

<header>
      <div class="header-content">
        <div class="left">
          <img src="." alt="Go to main page" class="logo" />
          <button class="header-button">Каталог</button>
          <button class="header-button">Топы</button>
          <button class="header-button search">
            <img src="." alt="Search" />
            <p>Поиск</p>
          </button>
        </div>
        <div class="right">
          <button class="header-button">Закладки</button>
          <button class="header-button black-white-theme"></button>
          <button class="header-button settings">
            <img src="." alt="Press to get to settings" />
          </button>
          <button class="header-button log-in">Войти</button>
        </div>
      </div>
    </header>

CSS:

header {
  height: 4rem;
}

.header-content {
  margin: 0 auto;
  width: max(1200px);
}

.header-content > * {
  margin: 0 auto;
  display: inline-block;
}

header {
  height: 4rem;
}

.header-content {
  margin: 0 auto;
  width: max(1200px);
}

.header-content > * {
  margin: 0 auto;
  display: inline-block;
}

9 Replies

Jochem•11mo ago

divs by default have 100% width, so that 0 auto gets translated to 0 0. auto margin only works when you have a set (max-)width on your element

Valdemar_check•11mo ago

But I've actually set width: max(1200px) on the parent element (.header-content). I don't get it

Jochem•11mo ago

Yeah, and the child elements take up 100% of that width You have to set the size on the children, otherwise there's no room for the margin

Valdemar_check•11mo ago

But they're display is inline-block, it means they're width should be fixed (IIRC). If I inspect both elements, they have exact width

MarkBoots•11mo ago

why inline block? just make the .header-content display:flex with justify-content: space-between/space-around also width: max(1200px) does nothing, it will just make it 1200px all the time. you probably want it to be max-width: 1200px; and don't set a height on header. let the content determine the height. (use padding-block if you want some vertical space)

Valdemar_check•11mo ago

I purposefully don't want to use flex here, because I want to train my understanding of margins Ah, I forgot what it does, yeah Thanks So, I put display: flex on the .header-content element, but still kept auto margins, and now it works. Why margin: 0 auto and margin-left: auto don't work when .left and .right are inside a block element display but work when they're inside flex element? This is counterintuitive to me right now. I thought auto margins work whenever parent has a specific width set

MarkBoots•11mo ago

inline blocks and auto margins are not a thing when becoming a flex/grid child it's okay

Valdemar_check•11mo ago

Then I'm really confused over when margin auto works and when it doesn't

MarkBoots•11mo ago

wanted to try to explain it myself. but think this SO answer does it better ref: https://stackoverflow.com/questions/19076919/marginauto-doesnt-work-on-inline-block-elements

Gaming

Programming

Margin auto doesn't work as I expected