Inline elements occupies only the space of the content. It does not take width and height values
Example:Anchor tags are normally inline elements, you see they only take up the width of their content and not the whole width of the page then the next anchor tags follow right after it.
What happens if we set a margin property on an inline level element?Inline elements will only take left and right margin values.
In the example I put a margin of 30px on all sides, as you can see if you check the anchor tag in the developer tools only the left and right side of the contents are affected by the margin.
What about padding?Inline elements accept padding values on all sides.
Floating Inline ElementsFloating inline elements will change its display value to a block level element and subject to all block level characteristics. Which means it can take margin and padding values, height and width values as well.
Block level elements take up the entire width of the page and always start in a new line.It can have margin/s and padding/s. If no width is set it will expand naturally to fill its parent container. If no height is set, it will expand to fit its content.
Example: (Div elements are naturally block level elements)In the first example the div just fill the entire width and just took out the height to fill its content. The second box we didn't set a width but it still filled the entire width and took the height of 60px plus the margin and the padding. Third box we set the width to 90 px and as expected it would do it took a height that is enough to fill its content. The texts were squished because of the reduced width so it felt the need to expand its height to accomodate its content.
Floating Block Elements
Floating block elements with no width and height set.
Floating block elements with width and height set.
Can we change an inline element into a block element?
Let's use the anchor tag as an example/
Yes, we can change display values from a block element to inline element and vice versa.Display values can be overwritten by another display value.
Inline-block elements are inline elements that can take block elements properties, such as width and height. It acts similarly to a float minus the clear property.
Example: Let's use inline-block to create a navigation.
We achieved the same results as to when we float the anchor elements to give them the block elements' properties. It's you get two elements in just one, you get to have the properties of inline elements and at the same time get the properties of block elements.
A floated element is taken out of the normal flow then shifted left or right.When you float a content it becomes a block-level element.
Example
Elements following a floated element will wrap around the floated element, we do not want this to happen, so I applied the 'clear: both' property to the third div, there are 2 other properties for clear, that's the left and the right. I chose to clear both, just to be sure.
There are other methods to clear floats, one of these methods is the clearfix method:
elementName::after {
content: " ";
display:block;
clear: both;
}
Basically, you just put the ::after pseudo-element on the containing parent element of the floated contents.
Every now and then we want to position things the way we want it to be and move it around the page, and floats simply cannot do this as it can only take an element to position left or right of the page. This is where positioning comes in. There are four types of positiong:
The element renders normally on the page - this is the default position of elements on the page.
This will allow you to put an element in the same place even when the page is scrolled. Top, Right, Bottom and Left properties are used to position this property.
Fixed positioned elements are taken out of the flow and does not leave a gap in the location of the page where you originally put it.
Notice the blue box on the bottom left side of the page. It is a fixed position element.
Positioned relative to its normal position. Setting the offset values will cause the element to move away from its normal position according to the values you've set. However, its position in the normal flow of the document will be preserved and following texts will not wrap around it.
When we position an element with offset values it moves on top of the next text/elements rather than pushing it down as to what padding and margin element would do.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non cumque repellat sapiente vitae nihil debitis accusamus, odit, tempore id reiciendis consequatur necessitatibus veritatis, distinctio vel, cum repellendus numquam blanditiis perferendis?
When the element is positioned absolute it is taken out of the normal flow and the original space of that element in the document will not be preserved.
Absolutely positioned elements are moved in relation to their closest relatively positioned parent element. Should a relatively positioned parent element not exist, the absolutely positioned element will be positioned in relation to the
element.Let's get some examples:
I will set the position of the section with the class of "pos-absolute" to position: relative so that the absolutely positioned element will be basing its offset values on the whole section element.
Notice the green box beside the Position Absolute title, it is an absolutely positioned element.