Remove Spaces
As you can see in the picture there is a big margin I want to remove that.
35 Replies
my code
haha
It gives an equal gap or empty space between the child elements of this container.
this is the structure of html
justify-content - CSS: Cascading Style Sheets | MDN
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
Check this for more info about justify-content values
adds space himself asks how to remove it 😁
you shouldn't nest P tags
it probably doesn't matter for the problem, but it's the wrong way to use that tag
well, actually, cause you aren't allowed to nest them, it's probably doing messy things in the DOM
is equivalent to
since whitespace is irrelevant to document structure in HTML, your
<p>Company:<p></p></p> is actually equivalent to <p>Company:</p><p></p>so what css should I do now
if you post your code as text, I can copy/paste and edit it
in a code block please
.flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.flex p{
flex-grow: 1;
}
I am trying to grow it to balance
the HTML, there's nothing wrong with the CSS
I dont know how
How do you want them to look like?
```html to open, ``` to close, both on their own lines, and your code in between
<div class="flex">
<p>Company:</p><p id="company-name"></p>
<p>Remaining Seats:</p><p id="remaining-seats"></p> I want to have a cleaner look less space from the Company : and Remaining Seats It looks ugly because the amount of space is too much
<p>Remaining Seats:</p><p id="remaining-seats"></p> I want to have a cleaner look less space from the Company : and Remaining Seats It looks ugly because the amount of space is too much
So you want a space between the company and the remaining seats only, right?
yes
like this
but I Manually input it to a p tag
Do what Jochem says, your HTML is wrong and causing it to do this
yes I did
wrap label and value together in a div
that way the flex will treat them as a single unit, and it'll put the space between the two units (of company and remaining seats)
i would use ul li not p here
I follow your instruction
XD
can I ask why you didn't make a codepen? Out of curiosity
ul li?
okay I'm gonna create now
I'd take that one further:
You'd lose some of the ability to style the distance between the label and the value, but it's much simpler HTML and that styling doesn't seem to be wanted in this case anyway
I dont understand why it behave like this
btw the id in span are dynamic
I mean the values
Do a code pen