According to the specification:
Block-level boxes are defined as those participating in a block formatting context. Each block-level element generates a primary block-level box that contains descendant boxes and generated content, serving as the key player in any positioning scheme. Some block-level elements may create additional boxes alongside the main one, such as 'list-item' elements, which are positioned relative to the principal box.
Is it safe to say they are essentially the same?
A primary block-level container is the block-level container formed by a specific element that is directly influenced by the style rules applied to it.
Most elements typically create only one container. In these cases, they essentially represent the same entity, as no additional containers are present.
However, depending on its display type, an element can generate multiple containers, such as a list item. When you define styles for such an element, these styles usually affect the primary container, while any extra containers generated will be displayed according to those styles.
For instance, a list item includes a marker container alongside the primary container; if you set list-style-position: outside, the list marker will appear outside the primary container's borders without affecting its background and borders. It's important to note that the marker container is still considered a descendant of the primary container, so inheritable properties like color will also apply to the marker (which explains why setting color: red turns both the text and bullet marker red).
Most other block-level elements, like those with display: block (excluding display: table - refer to section 17.4), generally produce a primary block container for their content exclusively, distinguishing them as simply "block containers", but solely within these particular elements.
In essence, all primary block-level containers are block-level containers, yet not every block-level container is deemed primary - for example, anonymous block containers. Additionally, inline elements, including inline blocks, do not individually form primary containers, nor does the concept extend to defining a primary inline container.
The primary block is essentially the representation of your 'markup' for mechanical purposes. Some 'primary' elements require other elements to be properly rendered, which are considered as 'artifacts' needed by a browser in order to display additional features (such as a scroll bar from a textarea).
Imagine having a complex bootstrap dropdown menu with over 100 li items. Each time you hover over an li, a new dropdown opens next to it. The problem arises when trying to make the list scrollable by setting max-height:300px; overflow-y:scroll; overflow-x ...
This code snippet applies delays but doesn't seem to update the style changes until the loop completes: for (i=20;i>=0;i--) { var boxShadow = i+"px "+i+"px "+i+"px #888"; $('article').css("box-shadow", boxShadow); ...
I am dealing with an HTML page that looks like this: <div id="cloneDiv"> <h1> <a href="">ASUS Vivotab Smart Black Office 2013 H&S ME400C-C2-BK 10.1-Inch 64GB Tablet (Black)</a> </h1> <di ...
My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery ...
I need help aligning the horizontal pictures with their corresponding names below <div class="imgages"> <img src="rock.png"/><p>Rock</p> <img src="paper.png"/><p>Paper</p> <img src="scissors.png" /><p&g ...
Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...
I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...
Table columns are not adjusting width properly with the table-responsive class. I want to specify the width of the column containing Well Type to be 200px. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="st ...
Is there a way to make my goMap-driven popup windows larger so that they do not require scroll bars? How can I adjust the height and width of the popup window? This is the jQuery and HTML code I am currently using: $("#map").goMap({ address: ' ...
I have been experimenting with different CSS styles for my website by using Chrome's "Developer Tools" to select elements and make edits. After tweaking various aspects, I have finally settled on a style that I am satisfied with. However, I am unsure ...
When the user scrolls through the ".all" div, I have a main div in the header and need to calculate the distance between 2 other divs. If the current "elems" div is only partially visible on the screen, I want to hide it. .main { width: 500px; h ...
I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...
Is there a way to create a horizontal line on just the left side of my text? Currently, the code I have creates a line on both sides. How can I modify it to achieve this? h2 { width: 100%; text-align: center; border-left: 1px solid #000; // Adjusted ...
I have a PNG image that is 500x500 pixels with a transparent background. Unfortunately, the image contains a lot of empty space around it, causing it to appear as if it has excessive margins or padding when used in my HTML. What I actually need from the i ...
I'm working on creating a collapsible menu that I can easily customize on any page without the use of iframes. As someone new to web design, I have knowledge of CSS and HTML but I am currently learning JavaScript with limited experience in jQuery or A ...
I am using Bootstrap 4 and have a set of three nav-link elements: <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav ...
I'm currently working on a component that is passed as a label prop. In order for me to utilize justify-content: space between within my div, I must ensure it has a width of 100%. You can see how this appears in the developer tools by clicking here. r ...
I'm having an issue with my HTML and CSS code that is supposed to display two images side by side and resize when the browser window shrinks, but it's not working as expected. Even after removing all classes on the parent divs, the images still ...
I recently started using Bootstrap 5 to build a new website and I encountered an issue with the layout of my feature and mission sections. I wanted the images to move above the text when the viewport is scaled down to mobile or tablet size, but I wasn&apos ...
If the actions column has a caption of "Activity" or custom settings and is frozen, the free jqgrid will not display column borders for this column in the search toolbar. Vertical lines do not appear in the search toolbar: Is there a way to resolve this ...