There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
Are there any elements that are automatically inline-block? Or are all elements inline -OR- block and then setting the element to inline-block in CSS gives it the attributes of both?
Inline blocks are a non-standard list presentation with, list-style-type: none; The bullets, margin and padding are part of list-style, so once that property is removed, only the list item textContent remains.
Doubful, there are any. It is an arbitrary property set by the designer. Elements are either block, so take the full width of the view point, or inline so they have no defined width, hence occur inline in normal flow.
In the inline-block lesson we were told " Images are the best example of default inline-block elements."
yet now you say you doubt there are any default inline-block elements. Please explain.
IMG has always been an inline element. On further testing, it would appear so, since there is no gap between them in the page when they are written inline.
On my website I have several ‘li’ divided into two different ‘div’ but in the same ‘ul’. I have set display: inline-block; for all ‘li’ elements but the ones in the second ‘div’ are pushed down one line. Can anyone tell me why?
The only direct children of UL are LIs. DIV cannot be a child of UL, but it can be a child of LI. Use LI as you have DIV, above, and treat it as a block element.
So I deleted the DIVs with class “home” and “nav” and instead assigned those classes to the individual LIs. Is that what you meant? It seems to be working either way. The reason for the DIVs where to left and right align the LIs within the header, respectively.
Not sure how you mean exactly. If I change the LIs from inline-block to block elements they won’t share a line anymore. I assume I’m missing the point here?
inline-block is still block level, it just has no width attribute. Block elements are meant to be sectioning elements. They are the basic building blocks of our structure.
It would appear you are wrestling with a number of concepts. That means going back to the beginning and taking the time to read the specs on W3C and MDN. Work with one concept at a time and create single purpose practice documents WITHOUT using a style sheet. Learn the default behaviors of every HTML element you intend to use, BEFORE trying to hammer it into something that looks good. HTML in raw form is ugly, but there is a reason for every default property.
Hello,
i tried practice with these consepts : inline, block, inline-block.
i did some exercice and i understand the role of them correctly but in this example below, i can’t understad why is there a gap between the div’s? Although there is no margin, no paddnig are added to my style sheet.
is it a standard in HTML or the browsers’ default style?
can i remove this gap with another method? because when i have a big DIVs, it’s good to put this line break between them to be more readable for us.
and the worse of that is the gap has a width.
The gap is due to how HTML handles white space; and, as far as a I know, there is no way to override it. We can use white space within the element, though, and keep the tags adjoined.
<div>
</div><div>
</div><div>
</div>
HTML recognizes and treats all white space as a single space. Ten hard returns still render as one space. Ten space characters render as one space.
My question is about the exercise for this lesson. The items with the class “answer” are formatted in the CSS code with text-align: center;, however, the answers are not centered in their containers. I tried adding margin: 0 auto; and that didn’t seem to center them either. Why is this, and is this something that can be corrected?
I changed the width of the class answer to 200 pxs, and now the H3 elements are centered in their containers. But there seemed to be plenty of room to center them when the width was only 120 pxs. I even made the padding 0, and they still wouldn’t center, but the answer “disagree” for example bled into the “neutral” box, despite there being a space on the left side of the “disagree.” Can anyone explain why that is?
The H3 elements are inheriting their horizontal alignment from either the default style sheet, or from a parent. I suspect it to be the default style so we don’t need the text-align property. We also don’t need padding, which is something I avoid at most turns. For this element I have these style rules…
<li> elements have a default display property of list-item. Bullet points can only appear on list-item elements and, because we changed the <li>s’ display property to inline-block, bullet points will not appear
) below.
) to up-vote the contribution!
