1
Three important properties control the space that surrounds each HTML element: padding, margin, and border.
Here, we can see that the blue box and the red box are nested within the yellow box.
Change the padding of your blue box to match that of your red box.
An element's margin controls the amount of space between an element's border and surrounding[a] elements.
Change the margin of the blue box to -15px, so it fills the entire horizontal[n] width of the yellow box around it.
background-color: crimson;
Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides.
Use clockwise[adv/adj] notation to specify the padding of specify the padding of an element.
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
Let's bring out CatPhotoApp again to practice using CSS Selectors.
For example, the below code changes the margins of all elements with the attribute type and a corresponding value of radio.
Understand absolute versus[giới từ/vs] relative units
The last several challenges all set an element's margin or padding with pixels (px).
In addition to px, CSS has a number of different length unit options that you can use.
For example, in and mm refer to inches and millimeters, respectively.
Absolute units tie to physical units of length.
Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.
There are several relative unit options that are tied to the size of the viewport[chế độ xem]. They are covered in the Responsive Web Design Principles section.
Now let's start fresh and talk about CSS inheritance.
We can prove that the body element exists here by giving it a background-color of black.
Prioritize one style over another.
Sometimes your HTML elements will receive multiple styles that conflict with one another.
Will our class override[ghi đè lên] the body element's color: green; CSS property?
Bạn đang đọc truyện trên: Truyen4U.Com