The two most simple types of display property are those that affect the element itself, and those that affect the things inside of it. An image is something that won't have anything inside of it, so we will take a quick look at the most popular display properties that affect the element itself.
display: block
This makes the image not "flow" horizontally with other things; it won't sit next to any text, and even if it doesn't fit all the way across the screen width-wise, it will block other things from taking up that space. By default, these take up 100% of available width.
display: inline
This makes the element "flow" horizontally with other things that "flow" horizontally (the "inline" direction). This is the same direction that words are displayed in a sentence in the given document.
Inline elements function "like text", and so many properties are restricted. You can set left and right margin and padding, but you cannot set top and bottom, or even an explicit width or height. They are automatically as small as they can be.
display: inline-block
If you were looking for the horizontal flow of an inline element, but the ability to set standard box model properties like a block element, this is the combined property that you want to use. It's placed like an inline element, but is styled more like a block element.
display: none
This visually hides the element, and makes it so screen-readers will not read it. Effectively, it makes it "not display".
So, with regards to alignment, you can use inline or inline-block for an image if you want to align it horizontally with something else. Block will force it onto its own line.
As a note, I will be covering some other properties (such as display: flex) in later articles in this series. They're quite complicated on their own!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Here is the MDN for display: developer.mozilla.org/en-US/docs/W...
The two most simple types of display property are those that affect the element itself, and those that affect the things inside of it. An image is something that won't have anything inside of it, so we will take a quick look at the most popular display properties that affect the element itself.
display: block
This makes the image not "flow" horizontally with other things; it won't sit next to any text, and even if it doesn't fit all the way across the screen width-wise, it will block other things from taking up that space. By default, these take up 100% of available width.
display: inline
This makes the element "flow" horizontally with other things that "flow" horizontally (the "inline" direction). This is the same direction that words are displayed in a sentence in the given document.
Inline elements function "like text", and so many properties are restricted. You can set left and right margin and padding, but you cannot set top and bottom, or even an explicit width or height. They are automatically as small as they can be.
display: inline-block
If you were looking for the horizontal flow of an inline element, but the ability to set standard box model properties like a block element, this is the combined property that you want to use. It's placed like an inline element, but is styled more like a block element.
display: none
This visually hides the element, and makes it so screen-readers will not read it. Effectively, it makes it "not display".
So, with regards to alignment, you can use inline or inline-block for an image if you want to align it horizontally with something else. Block will force it onto its own line.
As a note, I will be covering some other properties (such as
display: flex) in later articles in this series. They're quite complicated on their own!