CSS border margin table list

Padding-box

background-clip: padding-box/border-box/content-box

background-clip property をテスト。ドット \dpx dotted black

The background extends to the edge of content box.

dotted border

dashed border

solid border

double border

groove border

ridge border

inset border

outset border

none

hidden border

dotted dashed solid double border

border-style: groove; border-width: medium;

solid border-color: red(top) breen(right) pink(bottom) blue(left)

border left green 20px, background-color lightblue

border: 5px solid coral;/border-style shorthand property/border-width border-style(required) border-color

border-left: 10px solid red;
shorthand property for border-left-width, border-left-style, border-left-color.

border-top: thin groove tomato; box-sizing: 60%

normal border

border-radius: 4px;

bjorder-radius: 12px;

border-radius: 18px;

===========================================

change the 3 border property exercise:

border-top-style: 4px dotted red;/ testing failed.

border-top-style: dotted; border-top-width: 4px; border-top-color: red; /This is CORRECT!.

============================================

w3schoolのmargin,paddingの章は styleのbackground-color: lightblue; は自分で消したほうが理解出来る。

最初はlightblueの背景に、border: 1px solid black; な黒線が描かれていて理解不能だったが、background-colorを消すとdiv や p に書かれている文章が読めるので、上から何ピクセル左からどれだけの余幅を取っているのかが分かる。

style="width:480px;height:300px;" のようにstyleで指定

images tutorials

margin play it!

This is margin test. class="margin: 25px 50px 75px;"

This is also margin test. style="margin: 100px 150px 50px 250px;" top right bottom left; that is the order.

Also another one. border: 1px solid black; margin: 50px 300px;

This time; style="border: 1px solid black; margin: 10px 10px 10px 400px;"

style="margin: 35px 70px 50px; background-color: lightgreen"
35px for top
70px for left and right
50px for bottom

style="border-left: 25px solid tomato; background-color: lightgrey; margin: 10px 400px 10px 20px;"

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
style="width:350px; margin: auto; background-color: lightgrey; border: 5px groove coral;"

div id="inheritmargin" Test

div style="background-color: #f9e2d2;"Chocolate: lightness 80~90% Color Picker of Chocolate

Using inherit value

using div and #inheritmargin { background-color: hsl(0, 100%, 75%, 20%); margin-left: 140px; margin-right:50px; } }

p.margin {margin: inherit;}

inherted parent element

p.margin {margin: inherit;} /style="border: 2px dotted Olive;"

NOT inherted parent element
p.margin {margin: inherit;} style="border: 2px dotted Olive;" without div id="inheritmargin"

div id="inherimargin" Test is done.

margin collapse

Top and bottom margins of elements are sometimes collapsed into the one which equal to the largest of the two margins. Only top and bottom. Left and right margins have not this attribute.

style="margin: 0 0 80px 0;"

style="margin: 50px 0 0 0; "

above headlines have defferent margins. h2 element of bottom margin is 80px, h3 element fo top margin is 50px. The vertical margin between h2 and h3 should have 130px(80px + 50px). Because of margin collapse, the actual margin of the two is 80px.

<code> for computer
<var> for variable valeu in mathematics

Padding

top, right, bottom, left

style="border:1px solid black; style="border:1px solid black; padding: 25px 50px 75px"

style="border: 1px solid black; padding: 50px 50px 20px 100px;"

style="border: 1px solid black; padding: 20px 100px 20px 20px;"

style="padding: 25px 200px; "

This is width 300px background-color: tomato;

The width of this div 400px, even though it is defined as 300px in the css.style="width: 300px; padding: 25px; background-color: lightblue;"

box-sizing: border-box; /To keep the width of element, it's not increase the width. /style="float: right; width: 500px; border: 2px solid green; background-color: violet;"

style="width: 300px; padding: 25px; box-sizing:border-box; background-color: violet; "

CSS Box Model

Margin

Border

Padding

Content