Do
elements have a preset width?

Question

I'm an HTML/CSS beginner and I have a question about the width of <div> elements.

Here's my code:

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(IMAGES/hero.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-text-box {
  position: absolute;
  width: 1140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<body>
  <header>
    <nav>

    </nav>
    <div class="hero-text-box">
      <h1>Goodbye junk food. Hello super healthy meals.</h1>
      <a href="#" class="btn btn-full">I'm hungry</a>
      <a href="#" class="btn btn-ghost">Show me more</a>
    </div>
  </header>
</body>

This is what the result looks like:

However, if I comment out the 'width' command in the CSS, like this:

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(IMAGES/hero.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-text-box {
  position: absolute;
  /*width: 1140px;*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<body>
  <header>
    <nav>

    </nav>
    <div class="hero-text-box">
      <h1>Goodbye junk food. Hello super healthy meals.</h1>
      <a href="#" class="btn btn-full">I'm hungry</a>
      <a href="#" class="btn btn-ghost">Show me more</a>
    </div>
  </header>
</body>

Then the image changes to this:

I'd like to know why the second image looks the way it does? Why, for instance, did the browser choose to put a line break after the word 'Food', and another after 'Healthy'? Why isn't there a line break after every word? Or every letter, for that matter?

Ever since I started learning HTML/CSS I've had terrible trouble understanding the rules around spacing and positioning of elements. They seem arbitrary. Is there a reason why the <div> my text is in defaults to this specific width when I remove the 'width: 1140px' property from the CSS? It looks like the <div> containing the heading and my links has some kind of preset width that I don't know about, but that doesn't seem right.

`
` elements default to 100% width (of it's parent) because they are `display: block;` by default. — James Douglas, Jun 09 '20 at 16:56
The default width of a `div` is the width of its container, like all block-level elements. See [Where is the default size of a div element defined or calculated?](https://stackoverflow.com/q/35010655/215552) — Heretic Monkey, Jun 09 '20 at 16:56
"Why isn't there a line break after every word? Or every letter, for that matter?" Because the `div` isn't that narrow? If you made the `div` narrower, it would break on every word. It would be unlikely to break on every letter unless you added `word-break: break-word` to the CSS. — Heretic Monkey, Jun 09 '20 at 17:22

simmer · Answer 1 · 2020-06-10T00:13:33.973

2

<div> elements are "block-level" elements.

If you have a <div> with no CSS added, and you inspect it in a browser's web inspector, you'll see that the browser shows this styling:

div {
  display: block;

  /* ... other default properties ... */
}

Block-level elements implicitly have a value of width: 100%, taking up the full width of their parent element.

What's going on here is a consequence of applying absolute positioning.

When you set position: absolute on the <div>, it has implicit left and right values of 0.

div {
  position: absolute;

  /* implicit values:
  left: 0;
  right: 0;
  */
}

When you explicitly set the left property to 50%, the right property is still implicitly set to 0, so now you've effectively made the <div> only 50% of its original width.

You're using transform to pull the entire element back to the center, but doing so changes the position, not the width, so the width-shrinking consequences of left: 50% remain.

edited Jun 10 '20 at 00:13

answered Jun 09 '20 at 17:01

simmer

2,639
1
18
22

1

Hi, thanks for your explanation. I think I was confused because I didn't really understand how the 'transform: translate (-50%, -50%)' property worked. If I've got it straight, the 'left: 50%' effectively clears the text out of the left side of the screen. This pushes it to the right edge. The line breaks happen at the points where the text meets the right edge of the screen. Then, the 'transform: translate' command moves that scrunched up text box back to the centre but preserves the line breaks. I'm sure that's not how the underlying logic works but that seems to be the effect. – Nellington Jun 09 '20 at 18:52
Anyway, it was very helpful. Thanks for taking the time :-) – Nellington Jun 09 '20 at 18:56
Yep, you've understood. `left: 50%` pushes the left edge in, making the div half as wide, and causes the line breaks you're seeing. `transform: translateX(-50%)` moves the whole element to the left by 50% of its own width, but doesn't alter the width of the element. – simmer Jun 09 '20 at 20:22

score 0 · Answer 2 · answered Jun 09 '20 at 17:07

div by default takes auto (usaly 100%) of it's parent's width. Second image looks like it looks, because div in absolute position, takes whatever space is left. So You are offsetting div by 50%:

top: 50%;
left: 50%;

left space in container is 50%, so this div is resized to take 50% of it's parent space. Then You are transforming div by 50% to center it transform: translate(-50%, -50%); so it puts div in center with 50% of width

score 0 · Answer 3 · answered Jun 09 '20 at 17:33

Yes <div> is a block level elements. All block level elements inherit the width of their parent element by default or we can say that <div> will have the 100% width of its parent's widht that means if the parent have the wdth of 500px then the widht of <div> will be set to 100% i.e. 500px by default.

But the height will be 0 and height depends on the height of content.

and all this is happenning because of the absolute positioning...

and rest has been explained by Mr. simmer...!

score -1 · Answer 4 · answered Jun 09 '20 at 17:01

The div serves as a container for whatever is inside of it. Setting the width: 1000px gives h1, a, and other tags inside that a space of 1000px. When you removed the width, your div just fit whatever is inside it. Im not really good at explaining. Hope you understand a bit.

Do elements have a preset width?

4 Answers4

What's going on here is a consequence of applying absolute positioning.

Do
elements have a preset width?