Skip to content

Commit 43cc9e9

Browse files
[#524]: Add box model
1 parent 9de78ce commit 43cc9e9

File tree

5 files changed

+54
-55
lines changed

5 files changed

+54
-55
lines changed

01-layout/01-css-fundamentals/07-inheritance/README.md

-55
Original file line numberDiff line numberDiff line change
@@ -95,58 +95,3 @@ div {
9595
font-size: 40px;
9696
}
9797
```
98-
99-
# Modelo de CAJA
100-
101-
Para ver el modelo de caja al ccompleto vamos a realizar los siguientes cambios:
102-
103-
```diff
104-
body {
105-
border: solid red;
106-
font-family: "Raleway", sans-serif;
107-
}
108-
div {
109-
margin:40px;
110-
font-size: 40px;
111-
- border: inherit;
112-
+ border: 5px solid red;
113-
+ padding: 20px;
114-
}
115-
```
116-
117-
Pero si ponemos un width de 300, ¿Cuanto será el tamaño del elemento?
118-
119-
```diff
120-
body {
121-
border: solid red;
122-
font-family: "Raleway", sans-serif;
123-
}
124-
div {
125-
margin:40px;
126-
font-size: 40px;
127-
border: inherit;
128-
border: 5px solid red;
129-
padding: 20px;
130-
+ width: 300px;
131-
}
132-
```
133-
134-
Son 350px (la suma de 300 + 2 * padding + 2 * borde). ¿Como podemos evitar esto? cambiando la propiedad _box-sizing_
135-
136-
```diff
137-
body {
138-
border: solid red;
139-
font-family: "Raleway", sans-serif;
140-
}
141-
div {
142-
margin:40px;
143-
font-size: 40px;
144-
border: inherit;
145-
border: 5px solid red;
146-
padding: 20px;
147-
width: 300px;
148-
+ box-sizing: border-box;
149-
}
150-
```
151-
152-
Por defecto es content-box. Hay librerias que hacen esto por nosotros.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Box model
2+
3+
Para ver el modelo de caja al ccompleto vamos a realizar los siguientes cambios:
4+
5+
```diff
6+
body {
7+
border: solid red;
8+
font-family: "Raleway", sans-serif;
9+
}
10+
div {
11+
margin:40px;
12+
font-size: 40px;
13+
- border: inherit;
14+
+ border: 5px solid red;
15+
+ padding: 20px;
16+
}
17+
```
18+
19+
Pero si ponemos un width de 300, ¿Cuanto será el tamaño del elemento?
20+
21+
```diff
22+
body {
23+
border: solid red;
24+
font-family: "Raleway", sans-serif;
25+
}
26+
div {
27+
margin:40px;
28+
font-size: 40px;
29+
border: inherit;
30+
border: 5px solid red;
31+
padding: 20px;
32+
+ width: 300px;
33+
}
34+
```
35+
36+
Son 350px (la suma de 300 + 2 * padding + 2 * borde). ¿Como podemos evitar esto? cambiando la propiedad _box-sizing_
37+
38+
```diff
39+
body {
40+
border: solid red;
41+
font-family: "Raleway", sans-serif;
42+
}
43+
div {
44+
margin:40px;
45+
font-size: 40px;
46+
border: inherit;
47+
border: 5px solid red;
48+
padding: 20px;
49+
width: 300px;
50+
+ box-sizing: border-box;
51+
}
52+
```
53+
54+
Por defecto es content-box. Hay librerias que hacen esto por nosotros.

0 commit comments

Comments
 (0)