Ustawienie szerokości obicia/marginesu?

Question

Zasadniczo mam div, który chcę na 100% szerokości. Jednak chcę również, żeby miała trochę wyściółki. Ale kiedy dodaję dopełnienie, szerokość zostanie do niego dodana, co oznacza, że ​​mój div teraz zniknie z ekranu i pojawi się poziomy pasek przewijania.

Zazwyczaj kompensuję, po prostu zmniejszając wartość div (np. 95% lub 90%).

Zastanawiam się, czy istnieją bardziej eleganckie sposoby radzenia sobie z tą sytuacją?

Answer 1

Spróbuj ustawić dopełnienie do 5% i szerokości do 90% (100-5x2)

Answer 2

Spójrz na box-sizing.

.example { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
} 

Domyślnie szerokość elementu jest obliczana w odniesieniu do jego pola zawartości. Tak więc do szerokości dodawana jest nakładka. Jeśli zmienisz model skrzynki na border-box, dopełnienie zostanie uwzględnione w szerokości. Dla kompatybilności spojrzeć caniuse.com

Answer 3

Istnieją cztery główne rzeczy polegają w CSS Box Model. i) Margines ii) Border iii) Dopełnienie iv) Zawartość

Kiedy szerokość ustawiona wtedy jesteśmy w zasadzie ustawiania szerokości treści więc dodanie wyściółka oznacza ogólny wzrost o szerokości.

Proszę przejść przez następujące zasoby, a dowiesz się wszystkiego.

http://www.w3.org/TR/CSS2/box.html

http://css-tricks.com/the-css-box-model/

I można obsłużyć tę sytuację za pomocą% lub nawet jeśli obliczenia px szerokości poprawnie jeśli również ustawić granicę lub nawet chcesz ustawić marginesy.

element{ 
    width: 96%; 
    padding: 0 2%; 
} 

Answer 4

Domyślnie div jest width: auto który (przy założeniu normalnego pozycjonowania, wyświetlacz i brak pływającej) spowoduje to, aby wypełnić opakowanie (stanowiących marże, padding i border).

Po prostu zostaw to na width: auto zamiast ustawiać jawną lub procentową szerokość.