https://repl.it/@hyperhand9/CssExercise
In the link above, there is a simple html and css source scog that I wrote, and there is one img tag in the html code. However, if only the img tag goes in, strangely, the ancestral artistic tag comes down. The length that comes down is as high as the div tag right next to it. I can't find a reason why even ancestors are affected by a single img tag in the child div even though there was never a margin or padding. Masters, please answer. I'm studying web page development after doing C# and C++, but HTML and css are not easy at all.
html css layout
img is an inline block element, so use the text line of the article as a reference line. If the article encloses it as an inline block element, article is also based on the text line of the parent element. So the vertical alignment becomes a mess (?) as it is now.
If it's an element that divides the compartment, just give it to display: block;. Please correct it like this and check if the result was what you wanted.
section > article {
/* /* display: inline-block; */
display: block;
}
© 2024 OneMinuteCode. All rights reserved.