I’m just trying to properly understand something. Why could someone explain to me, why in the “Error” (When the form went wrong) box, is on a new line to the form block above it? I don’t understand what part is actually making it go to a new line, not squish it up into the same line as the field entry boxes, as it is within the same container.
Now, this is actually what I want, and the layout is as I want… But I am just trying to figure out why. When I switch the form block back from flex back to block it also stacks vertical, as the text box fields grow to the full size… I don’t understand why they’re doing that either…
I might of explained this badly… but if anyone gets it and wants to try to explain the behaviour it would be really appreciated.
Just incase you don’t understand. I just want to identify why that red box correctly has moved down onto its own line, and what is the setting/ element that is making it so. I’ve included my read only link if someone wants to try to explain… It would be greatly appreciated!
The form error element is just a div displayed as block with a top margin of 10px. Natural browser flow is that a block is displayed on its own line. Here’s a GPT summary of block layout;
Block Level: Block elements take up the full width available, by default, and start on a new line. Examples of block-level elements include <div>, <p>, <h1>, and <section>.
New Line: Each block element starts on a new line, meaning that any subsequent elements will be positioned below it, rather than next to it.
Width and Height: Block elements respect width and height properties. By default, the width of a block element is 100% of its parent container, unless a specific width is set.
Margin and Padding: Block elements respect margin and padding properties, allowing for spacing both inside and outside the element.
