There are certain CSS properties applied to a parent element that are “inherited” by the child elements. Name four properties that are inherited and four properties that are not inherited. Describe why you believe each is inherited or not.
- Four properties that are not inherited are margin, padding, margin-bottom, and border.
Describe the differences between inline, block, and inline-block. Why would you want to use the inline-block value? Hint you have an example use in your Natours project.
- Inline is the content that is laid out in lines. Margins and paddings are not taken into consideration.
- Block are elements that are literally in blocks.
- Inline-block is a combination of block and inline. Width and height can be set on the element.
Here are the exercises for this week:
For responsive units:
For BEM renaming:
<body> <!--the guardian /coronavirus outbreak--> <div class="fc-item fc-item--has-image fc-item--has sublinks-1 fc-item--pillar-news fc-item--type-article"> <div class="fc-item__container"> <div class="fc-item__media-wrapper"> <div class="fc-item__image-container u-responsive-ratio"> <picture></picture> <div class="fc-item__content"> <div class="fc-item__header"> <h3 class="fc-item__title"> <a href="#"></a> </h3> <div class="fc-item__standfirst-wrapper"> <div class="fc-item__standfirst"></div> </div> </div> </div> </div> </div> </div> </div> </body>
These are not all of the elements but these are some because it is a lot to write.
fc-itemis the first thing to know which is the block (the standalone component).
fc-item__media-wrapperare examples of the elements that cannot standalone, which is apart of the block.
fc-item--has-imageis an example of a modifier which is a different version of an element and again still connected to the block.